Form Patterns

Validation

  • Last four characters of passport number is required. Edit
  • Passport expiration date is required. Edit

Indicates a required field

Validation
This field is required
Day
Month
Year
This field is required

Documentation

Problem Being Solved

Users need to know how to correct form errors.

When To Use

Validation should be used on all fields that require a value. Validation should also be used for fields that require data to be entered in a specific format (e.g., email address) when the input is not dictated by the control type.

Note that the pattern consists of both field-level messaging and an error box at the top of the page with jumplinks to the field. This approach supports screenreaders.

When Not To use

Validation is not necessary if a field is optional and doesn’t require a specific data format.

Formatting

We use the jquery Validation plugin for front end validation, with some customizations for certain fields. See https://jqueryvalidation.org/

Fieldsets and Legends

Fieldsets and Legends
First Name
Last Name

Documentation

Problem Being Solved

Users need forms that are scannable and highly accessible.

When To Use

Using fieldset and legend is required whenever grouping related form controls. It makes the form more understandable for all users, including those using screen readers.

When Not To use

Because fieldset and legend have a specific meaning within HTML, they should never be used for anything but a form.

Field Layout

Field Layout
Country / region code
Phone Number
Day
Month
Year

Documentation

Problem Being Solved

Users need logically grouped fields.

When To Use

Fields may be placed side by side when the values they collect are interrelated.

When Not To use

Fields should be vertically stacked under almost every other circumstance.