Give instructions before failure
Show required status and formatting help near the field. Connect help and error text programmatically so it is available when the input receives focus.
Errors identify a recovery
Do not rely on a red border alone. Name the problem in text, keep the entered value when safe, and place focus or an error summary where the person can efficiently reach the first correction.
A familiar example
Correcting a password form
- The label and help explain the minimum requirements before submission.
- The failed field receives a specific text error.
- Other valid fields remain filled so the user corrects only the problem.
What to remember
- Explain requirements before the user submits.
- Pair visual error styling with text.
- Preserve valid input and make the correction easy to reach.