Form validation

Pattern in development

We are refreshing this pattern to include new guidance and code.

Use form validation for all forms where information is required or is required in a particular format.

Always show an error summary at the top of the form along with a message under invalid fields.

In some cases, you can present success validation on text fields. For example, if choosing a username.

Don't display text field errors as the user is typing. Wait until typing is finished or the form is submitted.

Use a multiline error alert to display a summary list of the validation issues.

Use this form to request or update your choices for the Coffee Catalogue.

There are some problems

Please provide a response for 'Coffee subscription number'.

What's your favourite type of coffee? *

Coffee subscription number *

Please provide your subscription number.

Put the alert at the top of the form. Set focus on the error summary when form validation has failed.

Each issue in the list should link to the related input field. Set focus to the field when the summary list item is clicked.

Display an error message under each invalid text field. Don't hide any 'helper text' when showing an error message.

What's your favourite type of coffee? *

Such as Arabica, Robusta or Liberica.

Please provide your subscription number.

When building or using this pattern:

Set the focus of the keyboard and scroll to the error summary when it appears. Make sure the error summary is announced by a screen reader.
Consider that errors can increase anxiety for people. An error shouldn't blame the user.
Add ‘Error: ’ to the beginning of the page<title> to inform assistive technology users as soon as possible.

Last reviewed 15 November 2022 .