Technique SCR32:Providing client-side validation and adding error text via the DOM
About this Technique
This technique relates to:
- 3.3.1: Error Identification (Sufficient)
- 3.3.3: Error Suggestion (Advisory)
This technique applies to script used with HTML.
Description
The objective of this technique is to demonstrate the display of an error message when client side validation of a form field has failed. Anchor elements are used to display the error messages in a list and are inserted above the fields to be validated. Anchor elements are used in the error messages so that focus can be placed on the error message(s), drawing the user's attention to it. The href of the anchor elements contain an in-page link which references the fields where error(s) have been found.
In a deployed application, if Javascript is turned off, client side validation will not occur. Therefore, this technique would only be sufficient in situations where scripting is relied upon for conformance or when server side validation techniques are also used to catch any errors and return the page with information about the fields with errors.
Examples
Example 1: Listing errors in a block at the top of a form
This example validates required fields as well as fields where a specific format is required. When an error is identified, the script inserts a list of error messages into the DOM and moves focus to them.
HTML for the form
Form Validation
