Skip to Main Content


PRESENTER: This tutorial exposes error messages in forms. We're going to cover what is form validation, immediate form field validation, form field errors, and markup for on-submit form errors.

Section one, what is form validation? When users fill in a web form, developers need to make sure that all the form data arrives in the correct format. Otherwise, there might be difficulties processing the data. In extreme cases, poorly formatted user data could break the application.

To make sure this doesn't happen, the web application should check each field as they're filled in by the user or as the user submits the form. If the data in each field is correct, then the form data can be submitted to the server. If any of the form data is incorrect, user should be presented with an error message for each individual field.

Section two, immediate form field validation. Immediate form field validation is where individual form fields are validated immediately after the user has entered data and then focus has shifted out of the form field. If there's an error, the following things should occur. Each form field that has an error should be flagged as an error. Flag form fields should not use color alone to signify errors.

The error message should be descriptive. It should provide information that will help users fill in the form correctly. And most importantly, the error message should be announced along with the relevant input. Now this can be achieved in two different ways. The first method places the error message inside the label itself, and the second method uses aria described by to associate the error with the input.

Section three, on-submit form field errors. On-submit form field errors is where the entire form is validated as a user attempts to submit the form. If there's an error in any field, the following thing should occur.

An error message should appear at the top of the form alerting users that there are errors. Focus must be taken to this error message. The error message should list all the errors and they should be listed in the order that they occur. Ideally, each listed error should be a link that takes the user to the relevant form control.

Section four, markup for on-submit form errors. Now how do we markup on-submit form errors? Well, the error message container should exist on the page, even when it's non-active. However, it should not contain any content until it's triggered.

The container should be set with role equals alert, and this is used to communicate important and usually time sensitive information. The container should also be set with tab index minus 1, and that means it can't receive focus at this time. When the user submits a form that contains errors, this error message container needs to become visible, and the contents of the error message need to be added inside this container. The tab index value needs to dynamically change from minus 1 to 0, and this means that focus can now be set on that element.

A new attribute can also be injected into the container to give it a label, which will be announced to screen readers as the container is given focus. And this can be achieved using the aria labelled by attribute, which points to the matching ID value on the hitting inside the container. In this case, they both have a value of error dash message.

Conclusion. So there you have it, a simple explanation of error messages in forms.

Except where otherwise noted, this work is licensed under Creative Commons by Attribution-ShareAlike 4.0 license. Copyright 2018, California Community Colleges, Chancellor's Office. These works are licensed under Creative Commons Attribution 4.0 International license. They're available to everyone and may be repurposed to meet the unique needs of educational institutions.