Pattern · forms
Form with error summary
Validation at submission, a summary at the top that takes the focus and links to each field, the message repeated under the field, and the success announced without moving the focus.
The pattern, live
How it works
- The form carries
novalidate: the browser's bubbles are not accessible enough to trust, and the messages are written here. - Validation runs at submission, never on each keystroke. The errors are computed once and given to the summary and to the fields from the same list.
- The summary renders when the list is not empty, takes the focus on its heading, and links each message to the field's id. No live region on it: a content that takes the focus is not a status message.
- Each field shows its own message, tied by
aria-describedbyand markedaria-invalid; the radio group ties the message to its fieldset. - The success is announced by a live region present from the first render; the focus stays where the user left it.
Rules a page that copies it keeps
- Every message says what to write and gives an example when a format is expected.
- The summary lists the errors in the form's order.
- Required fields say so in their name; nothing rests on the asterisk.
- A field that is fine gets
undefinedas its error, never an empty string in a red box.