Input is invalid on page load

[ahoiroman]

Versions

• vee-validate: 4.4.5

Describe the bug

I created different input elements that are making use of vee-validate. On page load the field is marked incorrect without having validated it. This is much too aggressive behavior in my opinion.

This problem is not appearing in vee-validate < 4.4.0.

Demo: https://codesandbox.io/s/pedantic-architecture-gm67w?file=/src/App.vue

As you can see here, I got a v-if statement, that I am using in my app too, as the form-items are shown after some stuff has been loaded. In this demo, the setTimeout()-function is faking this behavior.

[logaretm]

That's not the same issue as #3342, now the state is correct and the field is indeed invalid. You can always use resetForm to clear the errors.

[ahoiroman]

Hi,

adding a call to resetForm works fine, thanks for that hint!

[paulorodrigues-mb]

@logaretm I don´t know if this is the desired behavior but have to call resetForm when using a field on a modal for example is a very strange behavior.

[ahoiroman]

I solved that problem by sticking to the rule that the schema is the only source of truth. In some cases I had to rework Yup-schema to conditional rules instead of only using v-if to toggle fields (and the validation for it) etc.

[ahoiroman]

You can find a clumsy example for this at https://codesandbox.io/s/tender-varahamihira-ghxoq?file=/src/App.vue:0-975