Skip to content
UX Atlas
PatternExpert heuristicFoundational

Input Validation

Checking input at the right moment, which is rarely while the user is still typing.

Definition

Validation verifies that input meets requirements. The design decisions are when to validate, where to show the result, and how much to accept before rejecting.

Expert heuristic. A review criterion developed by practitioners. Useful and widely taught, but evaluated by judgement rather than measurement.

On this page
  1. Definition
  2. When to validate
  3. Requirements for an accessible validation experience
  4. In practice
  5. Sources
  6. Continue from here

When to validate

TimingUse forAvoid for
On input, as they typePositive confirmation, password strength, character countersNegative judgements before the field is finished.
On blurFormat checks, most field validationFields the user has not yet visited.
On submitCross-field rules, server-side checksAnything that could have been caught earlier.
After first failureRe-validating on input so the error clears as it is fixedThe first pass, which should wait for blur.

Requirements for an accessible validation experience

  • State requirements before the field is filled, not only after failure.
  • Show the message adjacent to the field, associated with aria-describedby.
  • Mark the field with aria-invalid when it fails.
  • Summarise all errors at the top on submit, with links to each field, and move focus to the summary.
  • Never clear entered data on a validation error.
  • Accept broadly and normalise, rather than rejecting formats a reasonable person would type.

In practice

Error summary with focus movement

Long forms

The pattern used in government service design: a summary at the top listing every problem, each linking to its field, with focus moved to the summary on submit. It works for keyboard and screen reader users and for everyone else.

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A CheckoutA FormAuthentication

Principles behind this

The reasoning this solution is an application of.

Depends on

Get these right first, or this one will not hold.

Often used with

These usually appear in the same screen or the same decision.

Practical example

A worked decision where this was the deciding factor.

Check your work

Review passes that test whether this was done properly.

Related concept

Connected closely enough to change how you apply this.