Example Form Validation, With Section Error

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

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.

Personal Information