VeeValidate odd results on custom validation

Question

I am validating start and end time fields in a form.
The inputs look like (yes, I have a lot of parameters to be able to do server-side validation):

<ValidationObserver>
                       <div class="w3-third">
                           <label>From</label>
                           <ValidationProvider vid='st'   mode="eager"  :rules="{'available': ['@st','@et', res_date, 'startTime', selectedField.id] }" v-slot="{ errors}">                        
                               <dropdown id="starttime" :options="startTimeOptions" v-model="startTime"  @change="getDuration()"></dropdown> 
                               <span class="w3-red">{{ errors[0] }}</span>
                           </ValidationProvider>
                       </div>
                       <div class="w3-third  ">
                           <label>Until</label>
                           <ValidationProvider  vid="et"   :rules="{'available': ['@st','@et', res_date, 'endTime', selectedField.id] }" v-slot="{ errors}">                        
                               <dropdown id="endtime" :options="endTimeOptions"  v-model="endTime" @change="getDuration()"></dropdown> 
                               <span>{{ errors[0] }}</span>
                           </ValidationProvider>

                       </div>
                   </ValidationObserver>

Even with a very simple validation rule like this where I am simply return true every time:

extend('available', {
        validate(value, {s, e, dt, which, field } ) { 
            console.log("validate", which );
            return true;

        },
        message: 'The time is not available ', 
        params:[ 's', 'e', 'dt', 'which', 'field']
    });

It validates once for each field when I enter the form component. But subsequent validations happen 3x times. Could this be related to how I am forming my rules object? I have changed the mode, but if I try "lazy" it doesn't validate at all after entering the form. Note that this is on a select dropdown input.

logaretm logaretm · Accepted Answer · 2020-01-14T10:48:25

I see that both fields reference themselves in the rule:

<ValidationProvider vid='st' :rules="{'available': ['@st','@et', res_date, 'startTime', selectedField.id] }" v-slot="{ errors}">

that is why it triggers multiple validation attempts per change because it validates the input itself and validates each targeted field, so for the same input it validates 2x times and one more for the other field.

You should only reference other fields and avoid referencing itself, use the value instead.

<ValidationProvider vid='st' :rules="{'available': ['@et', res_date, 'startTime', selectedField.id] }" v-slot="{ errors}">

You will need to change your rule implementation to take that into account though.

VeeValidate odd results on custom validation

1 Answers