Unexpected initial validation errors with validateOnMount:true and async initialValues in vee-validate v4
0 reputation · 01 Apr 2023, 17:14 UTC
0 reputation · 01 Apr 2023, 17:14 UTC
vee-validate v4 changed the default validateOnMount value from false (v3) to true, but the documentation states only "validates on mount" without specifying the interaction with asynchronously loaded initialValues or pre-set initialErrors.
When initialValues are populated after the form mounts — for example, from an API response — the validation run triggered by validateOnMount:true executes against empty or partial values, producing false-positive errors that persist until the next validation cycle.
It is unclear whether this behavior is intentional, whether validateOnMount should defer until after the first initialValues update, or whether users are expected to explicitly set validateOnMount:false and manually trigger validation once data arrives.
Does validateOnMount:true intentionally validate against unset initialValues? Should the first validation be deferred until initialValues are populated? Is there a recommended pattern for async initial data that avoids false-positive errors without disabling mount validation entirely?
34775 reputation · 02 Apr 2023, 02:06 UTC
Yes. In vee-validate v4, validateOnMount: true runs the validation schema as soon as the form mounts, using whatever initialValues exist at that moment. If your values load from an API and are assigned later with setValues or reset, the mount-time check executes against empty or partial values. Required-type rules then emit false-positive errors, and those errors remain in errors until the next validation trigger because vee-validate does not automatically re-run mount validation when initialValues arrive later.
Likely explanation: validateOnMount implements mount-time semantics only; it is not coupled to the first asynchronous initialValues update. This aligns with v4 changing the default from false in v3 to true.
Confirmed facts for this pattern:
useForm initializes.setValues or reset calls do not re-trigger mount validation by themselves.validate().validateOnMount: false in useForm options.setValues or reset.await validate() so validation runs against the loaded values.const form = useForm({
validateOnMount: false,
validationSchema,
});
const { data } = await fetchInitialValues();
form.setValues(data);
await form.validate();
If the values are already available synchronously, pass them in initialValues at form construction and you can keep validateOnMount: true.
Confirm the installed package and how values are supplied:
npm list vee-validate
Log errors.value immediately after mount and again after the API values arrive. False positives that disappear only after an explicit validate() confirm the issue.
Are initialValues passed to useForm at construction, or assigned later with setValues/reset? This determines whether you can keep mount validation enabled or should use the async pattern above.
Note: Behavior can vary between vee-validate v4 minor versions and between useForm and the older ValidationObserver pattern. Verify against your installed version before adopting this in production.
Use comments to ask for clarification. Post a solution as an answer.
No question comments on this page.