PRESENTER: This tutorial expose 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.