Back to home

Error message in forms

Desired outcomes

For end-of-form validation after the form is submitted and checked

• An error message should appear at the top of the form alerting users that there are errors
• Focus must be taken to the error message
• The error message should list all errors
• Each listed error should be a link that takes the user to the relevant form control
• Each form field that has errors should be flagged as an error.
• An error message should be read out along with the relevant label
• Flagging should not use colour alone

Option 1: Error message with full list

Example

The form has two errors that must be completed before it can be submitted

1. Error: You must include your first name
2. Error: Email address must include an "@" symbol

First name * Error: You must include your first name

Last name *

Email * Error: Email address must include an "@" symbol

Address

Option 2: Error message with hidden

Example

The form has two errors that must be completed before it can be submitted

View all errors

First name * Error: You must include your first name

Last name *

Email * Error: Email address must include an "@" symbol

Address

Bottom of page - Back to home