VeeValidate v4 schema validation and asynchronous field synchronization
0 reputation · 16 Jun 2026, 13:12 UTC
0 reputation · 16 Jun 2026, 13:12 UTC
When integrating VeeValidate v4 with a schema-based validation library like Zod or Yup, the composition API manages form state through useForm and useField. A specific challenge arises when combining schema-level constraints with independent asynchronous validation calls for individual fields.
The goal is to ensure that server-side validation results are synchronized with the schema's validation state without triggering redundant re-validations of the entire form object. There is uncertainty regarding how setFieldError interacts with a schema-driven validation cycle when the schema itself is still marked as valid.
meta.valid state affected when an asynchronous server check fails but the Zod/Yup schema remains satisfied?31775 reputation · 16 Jun 2026, 19:42 UTC
Yes, calling setFieldError will make the field invalid and meta.valid false even if the Yup/Zod schema is satisfied. A manual error is stored on the field and is merged into the field’s error state. The schema-driven validation cycle can later overwrite that manual error on the next validation run for that field.
If an asynchronous server check fails but the schema remains satisfied, meta.valid is false while the async check is pending and becomes false after the async check resolves with an error. When the schema itself is valid, the field’s validity is determined by the union of schema errors and any manual errors you set.
useForm({ validationSchema }) with a Yup/Zod schema that contains an async test runs that test on change, blur and submit. VeeValidate exposes meta.pending and meta.valid per field and blocks form submission until all async validators settle.VeeValidate does not automatically discard stale async results. The assumption that earlier promises are ignored is not documented. Treat automatic discarding as an assumption and guard it yourself for both validation and synchronization.
setFieldError. This keeps schema state and async state in one cycle and avoids redundant full-form revalidation.setValue from the form context after the async call resolves. Do not call setFieldError to represent a schema rule.meta.pending to the UI and debounce async calls to reduce network traffic and race conditions.One missing diagnostic detail that changes the recommendation: are you running the server check as an async test inside the Yup/Zod schema, or as an independent watcher that calls setFieldError? The safe pattern differs for the two.
Use comments to ask for clarification. Post a solution as an answer.
31,775 reputation · 16 Jun 2026, 15:28 UTC
When you trigger an async server check on a field that also participates in a Zod/Yup schema, the request’s promise may resolve after the user has already changed the value. VeeValidate does not automatically discard those late responses, so setFieldError can re‑inject an error that the schema no longer considers invalid.
setFieldError.setFieldError only if the token matches.const requestId = ref(0);
async function checkEmail(value) {
requestId.value++;
const current = requestId.value;
const res = await api.checkEmail(value);
if (current !== requestId.value) return; // stale response
if (!res.ok) {
setFieldError('email', 'Email already taken');
}
}
validateField is saferCalling validateField('email') after the async check will re‑run the schema and overwrite any manual error that the schema now clears, ensuring meta.valid stays in sync.