Skip to content
Accessibility

Forms that fail kindly

Everyone makes mistakes; good forms make mistakes cheap. Inline errors that explain, retries that keep your data, and undo where it matters — the patterns that turn validation from a punishment into a conversation.

Answers How should a form tell someone they made a mistake?errors belong next to the field, phrased as a next step rather than a verdict.

Beginner2 min read (computed · recorded 9)updated 2026-09-10a11yformsvalidationerrors

Validation is a conversation, not a verdict

A form error is the interface saying 'I could not understand this' — and the kind version of that sentence includes what to do next. The unkind version is the classic wall of red at the top: 'Please correct the errors below' with no map to the errors, or worse, a page reload that has wiped every field. Failing kindly means three promises: the error appears where the problem is, it says what is wrong in plain words, and nothing the user typed is lost.

  • Inline, next to the field: the message sits under the field that failed, in text plus icon (never colour alone), and the field receives focus or is linked from the error summary.
  • Live but not nagging: validate after the user leaves a field (on blur) or on submit — never after every keystroke of an unfinished answer; 'too early' validation feels like a supervisor watching you type.
  • Explain the rule, not just the failure: 'Password needs 8+ characters' teaches; 'Invalid password' accuses. The kind error names the requirement the input missed.
  • Keep the data: on any failure, the form returns with every field populated and focus on the first invalid field — a form that wipes itself on error has failed twice.
  • The error summary is a map: at the top, '3 fields need attention' with links that jump to each — for screen readers and keyboard users, the summary is how they find the failures at all.
kind-error.html
<label for="email">Email</label>
<input id="email" name="email" type="email"
       aria-describedby="email-error" aria-invalid="true"
       value="not-an-email">
<p id="email-error" role="alert">
  That doesn't look like an email — try name@example.com.
</p>
<!-- role="alert" announces to screen readers;
     aria-invalid tells AT this field failed;
     the value survives the error. -->

Undo is the kindest validation

Some failures are not validation failures at all — they are the user changing their mind. Deleting a row, removing an item, submitting a destructive action: the kind form offers undo ('Row removed — Undo') instead of a confirm dialog that interrupts everyone to protect against the one misclick. Undo is cheaper than confirmation, kinder than a modal, and it is the pattern users describe as 'the product just feels safe' — which is the actual goal of all this kindness.

Practise the lesson

Theory sticks when you ship it. These original Motif assets put this guide's lesson to work — open one and copy it into your own page.