Example Form Validation, With Section Error

The form below uses multiple techniques to indicate form field errors.

• When blurring out or when an error is detected, the field border and labels become red and slightly bolder in appearance.
• When blurring out or when an error is detected, a red Error: message is associated with the field.
• When blurring out or when an error is detected, aria-invalid="true" is injected into the control.
• On blur (only), a aria-live region is populated with a message announcing, Error in previous field, [text of error message].
• When clicking the Submit button, if the user has not filled out the form correctly — that is, there are one or more errors — focus goes to the first field with an error, and a live region message will announce to screen reader users, indicating how many errors are present in the form.
• When the form has been correctly filled out focus will go to a mock system error, in a div above the form. Since there is change of context that accompanies this new content, there is no live region announcement.
• All fields are assumed to be required, unless denoted (optional), and those fields are marked aria-required for screen reader users. Use of this attribute allows us to skirt unwanted side effects sometimes seen with browsers/screen readers when the boolean required is used.

Live region messages — considered to be status messages on this page — are on a delay of two seconds, so that messages are less likely to get clobbered by the screen reader, which may be dealing with announcements that result from focus changes. We have noticed some screen readers do not acknowledge live region messages when they occur simultaneously with changes of focus.

The error and helper text/formatting text below the field are aria-hidden in order to minimize chatter when browsing the form with a screen reader.

When in a field, validation runs on each key-up event, except Tab key. So we can clear the error as soon as the field's validation pattern is met.

Note: Error checking in this form is not very robust. Most of the fields are just looking for some text to go in them, except for the email, zip, and state abbreviation fields, which match on particular patterns. There is no checking if a zip or state abbreviation is correct.