Techniques for WCAG 2.0

On this page:

-

# SCR18: Providing client-side validation and alert

## Applicability

Content that validates user input.

This technique relates to:

- Success Criterion 3.3.1 (Error Identification)
  - How to Meet 3.3.1 (Error Identification)
  - Understanding Success Criterion 3.3.1 (Error Identification)
- Success Criterion 3.3.3 (Error Suggestion)
  - How to Meet 3.3.3 (Error Suggestion)
  - Understanding Success Criterion 3.3.3 (Error Suggestion)
- Success Criterion 3.3.4 (Error Prevention (Legal, Financial, Data))
  - How to Meet 3.3.4 (Error Prevention (Legal, Financial, Data))
  - Understanding Success Criterion 3.3.4 (Error Prevention (Legal, Financial, Data))

## 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.');" />

## Related Techniques

- G89: Providing expected data format and example

## 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

- #2 is true

- Top
- Contents
- Intro
- Previous: Technique SCR16
- Next: Technique SCR19