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.

score 0 · Answer 1 · answered Jan 14 '20 at 10:48

0

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.

answered Jan 14 '20 at 10:48

logaretm

1,345
9
12

OK, I see that, thank you. Another thing is that I do dynamically change the options. I do not change the value, though. Would that fire a validation? – user1550044 Jan 15 '20 at 14:09
Also, if i set mode to "eager" on either of those fields, after making the change you provided, it only validates when the component is mounted. It never validates on a change. – user1550044 Jan 15 '20 at 17:30
Changing the options will trigger a validation if the field was validated before. The interaction modes only work if the component you are using are emitting the correct events if they are not then you will to either emit those events (`change`) yourself. – logaretm Jan 16 '20 at 10:19

VeeValidate odd results on custom validation

1 Answers1