Fig. 34 / Inline Validation
Web UI Patterns
Inline Validation
EXPLAINED SIMPLY:The form feedback that appears beside the problem.
Inline validation is when a form checks each field as you work and places the result beside the exact field that needs attention.
The location is the point. "Password needs at least 12 characters" belongs under the password box, not in a red summary at the top after submit. An inline error keeps the problem and the fix in the same patch of screen.
Timing matters too. Scolding someone while they are still typing the first character is irritating, but waiting until the whole form fails wastes their time. Most forms validate when a person leaves the field, then clear the message as soon as the answer is fixed. Untouched fields stay neutral.
You'll also hear form validation, field validation, inline error, field error, and real-time validation. Microcopy owns the words inside the message. Accessibility requires more than turning the border red, because color alone cannot explain what failed.
Say what happened and how to fix it. "Invalid input" does neither. A form should help each answer succeed before it judges the whole page.