TanStackT
TanStack•15mo ago•
27 replies
worthy-rose

Form-level onBlur validation shows error messages during typing for required length fields

I've noticed an unexpected behavior with form-level onBlur validation in TanStack Form. When using a Zod schema for validation with onBlur, typing in a field that has a minimum length requirement shows validation errors immediately during typing, before the user has finished entering their input or left the field.

Example scenario:
1. Form has multiple fields with Zod validation (e.g., first_name requires min 2 chars)
2. Form setup:
useForm({
  validators: {
    onBlur: zodSchema
  }
})

3. User starts typing in first_name field
4. After typing just 1 character, the "minimum 2 characters" error appears immediately
5. We're using isTouched to prevent premature error display in other fields:
{state.meta.errors.length > 0 && state.meta.isTouched && (
  <ErrorMessage>{state.meta.errors.join(", ")}</ErrorMessage>
)}


Current behavior:
- Error messages appear while typing, before the field is blurred
- This creates a poor UX where users see validation errors before they've finished their input

Expected behavior:
- Validation errors should only show after the user has completed their input and left the field (true onBlur behavior)
- Or at least provide a way to distinguish between "currently typing" and "finished typing" states for validation display

Is this the intended behavior? If so, what's the recommended pattern for handling minimum length validations without showing errors prematurely?
Was this page helpful?