Passive interaction mode becomes aggressive for <input> after first validation

[wjdp]

Versions

• vee-validate: 3.0.10
• vue: 2.6.10

Describe the bug ValidationProvider passive mode removed after first full form validation.

To reproduce Steps to reproduce the behavior:

1. Go to demo — https://codesandbox.io/s/veevalidate-30-passive-mode-issue-pzs57
2. Click on buttons to make field valid and invalid
3. Click submit, validation state of ValidationProvider is disregarded and unrelated input is validated instead.

Expected behavior The state of the input field should be ignored when in passive mode. The last value pushed to the Validation observer should be all that matters.

My use case for this is a form field where numbers are collected in an array. I want to validate the array and not the value of the input used to add numbers to the array.

Demo link https://codesandbox.io/s/veevalidate-30-passive-mode-issue-pzs57

Desktop (please complete the following information):

• OS: Ubuntu 18.04
• Browser: Chrome 76

Additional context Seems to be very similar to #2273

[wjdp]

Seems for my use case, custom components with one or more inputs that don't always map to the output value, I should be using the Higher Order Components pattern.

Wrapping my field components with withValidation seems to work well. Feel free to close this issue if the above I'm using the library wrong :smile: .

[logaretm]

I should probably add an example for this use-case. As far as the example you provided that's not a bug. The passive mode only disables validation reacting to events, does not turn the validation completely manual, for more control you should use HoC as you mentioned.

[adsonvinicius]

I've reopened this thread because I can't understand why a passive mode (which should be called by Validate method of one ValidationObserver) validates an input even if this validate() method is not called.

I extended the required rule to test.

setInteractionMode('passive');

extend('required', { validate(value, args) { console.log('Validation: Required - ' + value); return false }, message: 'Message from validate' });

So when the component is rendered and the v-model on input is empty the validate above is not called.

< validation-provider rules="required" name="Username" v-slot="{errors}" slim > < b-form-input v-model="username" >< /b-form-input > < span >{{ errors[0] }}< /span > < /validation-provider >

However when v-model (name) is changed the validate method is called and the console shows the message. This could not be a problem because even calling in practise nothings goes wrong for the UI.

This becomes a problem when I use a sub-component and as the validation method used is called when the v-model changes after the second time (even in passive mode) it throwns an error when the v-model is not changed.

I took me long time to figure out what was causing this error. I can't reproduce because is a large app but I can show an image about what I'm doing:

Maybe could be harder to understand by this image but this problem about passive mode validating an input when it's v-model changes for the second time. I've seen some issues related to this subject but nothing really let me understand why it happens.

[sebenik]

Can confirm this behavior and I'm also looking for a way to overcome it.

[lukas-vis-mybanker]

Still suffering because of this "passive" implementation in 2024 Eyyyyy 🥳