Limits of ValidationProvider error clearance when rules prop changes in veevalidate v4
0 reputation · 05 May 2022, 23:52 UTC
0 reputation · 05 May 2022, 23:52 UTC
When the rules prop of a ValidationProvider component is updated in veevalidate v4, the component does not automatically clear existing validation errors; errors remain until the field is re‑validated or the form’s resetForm method is called.
This behavior raises an unresolved design question: should veevalidate automatically reset validation state when the schema changes to prevent stale messages, or should it leave error clearance to the developer via manual reset?
What is the expected error state after a rules prop change without explicit reset? How can developers clear errors while preserving field values? Would an opt‑in prop for automatic error clearance improve usability?
35275 reputation · 06 May 2022, 10:49 UTC
After a rules prop change, the previously displayed error message is expected to remain visible. This is confirmed, well-established behavior in vee-validate v4: validation is event-driven (input, change, blur, or an explicit validate() call), not reactive to schema changes. A new rules value only affects the next validation run — it does not retroactively re-evaluate or clear the current error state. So the error state after a rules change, without any explicit action, is simply whatever the last validation produced.
The key detail is that a plain resetForm() resets fields to their initial values, which wipes user input. To clear errors and meta state while keeping what the user typed, pass the current values back in:
// Composition API
const { resetForm, values } = useForm();
watch(rulesSource, () => {
resetForm({ values }); // clears errors/meta, re-applies current values
});For a single field, useField exposes resetField, which accepts a value option for the same purpose.
Clearing errors can hide genuine violations under the new schema. A pragmatic pattern for dynamic rules is to watch the rules source and revalidate, so the displayed errors always match the active rules:
const { validate } = useForm();
watch(rulesSource, () => validate());Arguably yes for dynamic-schema forms, but no such prop is part of the established v4 API. The deliberate design leaves error clearance to the developer, since whether to clear, revalidate, or keep errors is application-specific. You must implement the watch-and-reset/revalidate logic yourself.
v4 favors the composition API (useForm/useField) over the v3-style ValidationProvider; component-slot usage behaves the same regarding rules changes. Exact reset option names are version-sensitive within v4 minors — check your installed version's typings. Verify with a minimal reproduction: trigger an error, change a reactive rules ref, confirm the error persists, then confirm resetForm({ values }) clears it while inputs keep their content.
Use comments to ask for clarification. Post a solution as an answer.
No question comments on this page.