Developer Checklist — JavaScript Appendices

Incorrect code

JS_F_A5: Do not force the focus to remain in invalid fields

This example shows how not to implement form validation, using a blur event with programatic focus to validate an input field. This forces a change in the natural browsing behavior, and is both annoying and confusing for users.

The correct way to implement form validation is described in: JS_F_A1, JS_F_A3 and JS_F_A4.

Live Demo

Type a value into the field below, then Tab or click away from it; if the value is not numeric the script will force the focus back into the field, until it is:

JavaScript Code

The JavaScript code for this example can be found in: JS_F_A5.js