Why use this pattern
Use an error message when there is a validation error. Explain what went wrong and how to fix it.
When to use an error message
Highlight the field that caused the error. Describe the problem and how to fix it in an error summary at the top of the screen.
Use standard messages for different form field types. For example, a radio button field and a select field should use the same standard message.
Try to design your service to be easy to use and understand so someone never sees an error message.
When not to use an error message
Only display an error when someone tries to move to the next part of the service. Do not show error messages:
- When users select or tab to a field;
- as they are typing;
- when they move away from a field.
Do not use error messages to tell users that they are not eligible or do not have permission to do something. Instead, show a warning message that:
- Explains why we cannot accept the entry or selection;
- tells them what to do next;
- includes a way to leave the transaction.
How it works
For each error:
- Use a red border to visually connect the message and the form field it belongs to;
- put the message in red at the top of the screen in an error summary.
Summarize all errors at the top of the screen the user is on using an error summary.
Form field label
What is the expiry (end) date of your insurance policy?
Error messageYour insurance expiry date must be later than today.