Inline validation
Field-level feedback shown during or right after input, instead of a single verdict after submit.
States
defaultfocusfilledvalidatingsuccesserrordisabledread-only
Do / Don't
Do
- Validate on blur, or after the user pauses typing
- Keep the error message next to the field it belongs to
- Write errors as "what happened + how to fix it"
- Preserve the user's input on error, always
Don't
- Flag an email as invalid while it is still being typed
- Rely on red color alone to mark errors (WCAG 1.4.1)
- Show a generic "form contains errors" with no anchors
When to use
Forms with more than ~3 fields, strict formats (email, password rules), or a high cost of abandonment. Skip it for one-field forms where a submit-time check is cheaper and calmer.
Accessibility
- Tie error text to the field with
aria-describedby; announce changes witharia-live="polite". - Error state must not be color-only: add an icon and text.
- On submit failure, move focus to an error summary that links to each failing field.
Platform notes
On mobile, pair validation with the correct keyboard type (email, numeric) and autocomplete attributes — half of “user errors” in forms are input-mode errors.
Evidence
- NN/g, “How to Report Errors in Forms” — errors adjacent to fields, in plain language.
- Baymard — premature (“live”) validation during typing measurably increases frustration; validate after field completion.