С vee-validate сделать пользовательскую проверку - PullRequest
Новая
       14

С vee-validate сделать пользовательскую проверку

0 голосов
/ 06 мая 2019

В моем приложении vue 2.5.17 у меня есть выборочный ввод и ввод текста, и у меня есть создать правило проверки, которое должно заполнять только 1 из них: 

    <div class="form-row p-3">
        <label for="existing_user_list_id" class="col-12 col-sm-4 col-form-label">Select already existing list</label>
        <div class="col-12 col-sm-8">
            <v-select
                    v-model="selection_existing_user_list_id"
                    data-vv-name="selection_existing_user_list_id"
                    :options="userListsByUserIdArray"
                    v-validate="''"
                    id="existing_user_list_id"
                    name="existing_user_list_id"
                    class="form-control editable_field"
                    placeholder="Select existing user list"
                    v-on:input="onChangeSelectionExistingUserListId($event);"
            ></v-select>
            <span v-show="vueErrorsList.has('existing_user_list_id')" class="text-danger">{{ vueErrorsList.first('existing_user_list_id') }}</span>
        </div>
    </div>

    <div class="form-row p-1 m-1 ml-4">
        <strong>OR</strong>
    </div>

    <div class="form-row p-2`">
        <label for="new_user_list_title" class="col-12 col-sm-4 col-form-label">Create a new list</label>
        <div class="col-12 col-sm-8">
            <input class="form-control" value="" id="new_user_list_title" v-model="new_user_list_title" @change="onChangeBewUserListTitle($event);">
            <span v-show="vueErrorsList.has('title')" class="text-danger">{{ vueErrorsList.first('title') }}</span>
        </div>
    </div>

Я нашел это:
https://baianat.github.io/vee-validate/guide/custom-rules.html#creating-a-custom-rule

Но я не совсем понимаю, как использовать его в моем случае.Я пытаюсь: 

    import { Validator } from 'vee-validate';
    Validator.extend('new_user_list_title', {
        getMessage: field => 'The ' + field + ' value is not a valid new_user_list_title.',
        validate: value => false // for simplicity I try to raise error always
//        validate: value => value.length == 0 && selection_existing_user_list_id == null
    })

Но моя пользовательская ошибка никогда не срабатывает, даже если я всегда устанавливаю false,

Какой путь верный?

Спасибо!

1 Ответ

2 голосов
/ 06 мая 2019

После добавления пользовательского правила его необходимо использовать в компоненте (в v-validate): 

<input 
  class="form-control" 
  id="new_user_list_title" 
  v-model="new_user_list_title" 
  @change="onChangeBewUserListTitle($event);"
  v-validate="'new_user_list_title'">
...