vee-validate
vee-validate copied to clipboard
logaretm
validateOnRulesChange property
Is your feature request related to a problem? Please describe.
We have a form with four fields and a toggle. If the toggle is set to false all four fields are mandatory, if it's set to true two fields are optional. Currently vee-validate listens to rules changes and immediately validates, causing all four fields to become red when changing the toggle. But we only want to validate on-blur or on-submit.
Describe the solution you'd like
Optimally, we'd have a validateOnRulesChange prop on the Form or Field. It would default to true (the current situation), but disable the rules-watch on false. We know, that this can lead to outdated validation states in some cases, but for us these are much less common than the situation described above, and since we always revalidate on-submit, that wouldn't be a big issue.
Describe alternatives you've considered
We currently have a work-around, where we set the rules to be a dummy function until the form is mounted. In that case the rules-watch is not set and everything works as we like it. But it's a hack.
Not sure about implementing this. I would like to keep configuration to a minimum by selecting "good defaults" and leaving the rest to user-land.
You could use the touched flag as an extra guard for your visual error UI, no?
@logaretm If we check touched the errors will not show up when a form is validated.
A better default that wouldn't require a validateOnRulesChange in my opinion is only to validate on rule change if the field has already been validated, maybe something like:
if (isEqual(value, oldValue) || !meta.validated) {
return;
}
Btw. this is a project we have been migrating from vue@2/vee-validate@3, iirc this hasn't been an issue for us before.
If there's another way, such that we can override this behavior without patching or the above mentioned hack. That would be very welcome as well. Currently it's one big method and we don't see how we could interfere to override a part of it.