Use inline validation to explain a specific field problem near the field. Use an error summary to help users recover from one or more form errors from the top of a page or step.
Use inline validation to explain a specific field problem near the field. Use an error summary to help users recover from one or more form errors from the top of a page or step.
Practice the judgment: Imagine this situation: Interrupting typing with premature validation messages. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Inline validation | Error summary |
|---|---|---|
| UI or UX | UI + UX - Field-level validation feedback | UI + UX - Form recovery summary |
| UI guidance | Render a labeled field with hint text, field-adjacent error text, invalid styling, preserved value, and corrected state. | Render a top-of-form summary block with heading, linked error list, and matching field-level error messages. |
| UX guidance | Help the person reach a clear task outcome. | Move users from the summary to the exact field, group, or first invalid control that needs correction. |
| Good UI | Error text appears next to the field with readable spacing, persistent label, hint text, and the invalid value still visible. | Top-of-form summary with a clear heading, linked error list, and matching inline field messages. |
| Bad UI | Error message appears far from the field it describes. | Summary and field messages visually disconnected or contradictory. |
| Good UX | Validation appears after blur or submit when it helps correction. | After failed submit, focus or reading order makes the summary discoverable before users scan the form. |
| Bad UX | Showing errors before users type. | Only showing errors below the fold. |
| Best fit | A single field has a specific correctable problem. | Form submission can produce one or more errors. |
| Avoid when | The main recovery task is finding several errors across a submitted page. | The message is a system failure, permission problem, or outage rather than a validation issue. |
| Required state | Invalid field with preserved user value and adjacent correction text. | Failed-submit state with summary visible near the form heading. |
| Accessibility burden | Expose invalid state on the input and connect error text to the field description where possible. | Use a heading and alert behavior that makes the summary discoverable. |
| Common misuse | Showing field errors before users have interacted with the control. | Replacing field-level messages with only a top-level summary. |