Form validation - Intelligence Community Design System

Skip to page content

Show navigation section

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.

Cancel

Submit request

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.

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 .