Validation with v-if on native html form

[vencakrecl]

What happened?

When the form is displayed for first time then run validation and ends with errors. For second time is displayed form is valid. When I use Form component everything is ok. See https://codesandbox.io/s/custom-text-input-with-vee-validate-v4-forked-elbwt?file=/src/App.vue

Reproduction steps

No response

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Relevant log output

No response

Demo link

https://codesandbox.io/s/custom-text-input-with-vee-validate-v4-forked-elbwt?file=/src/App.vue

Code of Conduct

• I agree to follow this project's Code of Conduct

[logaretm]

Thank you for reporting this, this is indeed a weird inconsistency between the two variants. Will mark it as a bug and will check it out when I can.

[logaretm]

Took another look at this, this is caused by the fix for #3342

To explain this better, basically vee-validate has already validated the form when you called useForm in your setup function. When the inputs are mounted they just inherit their previous errors.

I don't think it is possible to cater for both use-cases, as vee-validate isn't in a good position to determine if inputs should inherit their previous errors or not.

This makes me more inclined to have error messages rendered at all times and give the user control over when to show them (with touched or dirty). But the problem here is this is a huge breaking change and won't be introduced in 4.x

As a workaround for your case, you could call resetForm when the visibility changes or make sure you show your errors if the field is touched which you can access in meta.touched.