With vee-validate make custom validation

Question

In my vue 2.5.17 app I have a select input and text input and I have a create a validation rule that only 1 of them musdt be filled :

    <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>

I found this :
https://baianat.github.io/vee-validate/guide/custom-rules.html#creating-a-custom-rule

But I am confused how to use it in my case. I try :

    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
    })

But my custom error is never triggered, even when I set always false,

Which is right way ?

Thanks!

ittus ittus · Accepted Answer · 2019-05-06T10:04:15

After adding custom rule, you need to use it in component (in 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'">

With vee-validate make custom validation

1 Answers