Techniques for WCAG 2.0

Skip to Content (Press Enter)

-

SCR18: Providing client-side validation and alert

Applicability

Content that validates user input.

This technique relates to:

Description

The objective of this technique is to validate user input as values are entered for each field, by means of client-side scripting. If errors are found, an alert dialog describes the nature of the error in text. Once the user dismisses the alert dialog, it is helpful if the script positions the keyboard focus on the field where the error occurred.

Examples

Example 1

The following script will check that a valid date has been entered in the form control.

Example Code:


<label for="date">Date:</label>
<input type="text" name="date" id="date" 
onchange="if(isNaN(Date.parse(this.value))) 
alert('This control is not a valid date. 
Please re-enter the value.');" />

Tests

Procedure

For form fields that require specific input:

  1. enter invalid data

  2. determine if an alert describing the error is provided.

Expected Results