Error message

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.

Example

Form field label

What is the expiry (end) date of your insurance policy?

Error message

Your insurance expiry date must be later than today.
Last update:
aoĆ» 30, 2018