Error messages
Help users understand when a form error has occurred and how they can fix it. 

When to use this pattern

Use this pattern to let users know if they have filled out a web form incorrectly.

Only use this pattern for form errors. Don’t use it to tell them they aren’t eligible or that there’s a problem with the service.

How it works

Summarise errors at the top of the page

You must:
  • show an error summary at the top of the page
  • include a heading to alert the user to the error
  • link to each of the problematic questions
  • use the same error message in the summary and the form

This is so it is visible when the page is refreshed and is immediately read out by assistive technology.

Highlight errors in forms

For each error:
  • write a message that helps the user to understand why the error occurred and what to do about it
  • put the message in the <label> or <legend> for the question, after the question text, in red
  • use a red border to visually connect the message and the question it belongs to
  • if the error relates to specific text fields within the question, give these a red border as well

Keep forms simple

  • Recovering from errors can be hard for users, especially if a page contains multiple errors.
  • Simplify forms by rewriting and where possible, splitting long forms across multiple pages - with each page asking a single question.

Write error messages that make sense to users

Your error messages must to be specific and helpful. So make sure you write them; don't rely on a machine to do it for you. 

Error messages must:
  • be in the active voice 'Enter your name' not 'Your name must have an entry'
  • be written consistently – if one message is 'Enter your name' another one for a missing address should be similar not 'Please provide an entry for your address'
  • include a reference to the problematic question so that the user can understand the message without having to re-read the question (particularly important for screen-reader users)
  • explain why the error has happened without blaming the user for the error

  • tell the person exactly what they need to do – avoid ‘Fill in this question’ or ‘Answer this question’
  • be included in the prototypes so you can test them

Test your error messages with users

  • Error messages are often neglected - make sure they’re written by a content designer and have been tested in user research

Use inline form validation with caution


It’s possible to use JavaScript to enhance a web page by providing error messages dynamically, as the user is typing. This can help in some circumstances, but can also confuse users. Follow the pattern for +Inline form validation.

Examples


Here are some example scenarios with suitable error messages:

Yes-no question with nothing selected
Select yes if you live in the UK