Developer Checklist — JavaScript Appendices

Correct code

JS_F_A1: Form validation should be triggered by submission, rather than individual field events and JS_F_A3: Form validation should trigger an alert then set focus on the first invalid field and JS_F_A4: Validation error messages should be programmatically inserted directly after the field they relate to, using functions of the DOM

This example shows how to implement basic JavaScript form validation, with a four-step process:

Live Demo

Try entering a value into one of the fields but leave the other one empty, or enter a value with inappropriate special characters, and then submit the form. If either value is missing or invalid, the validation process will occur:

JavaScript Code

The JavaScript code for this example can be found in: JS_F_A1-A3-A4.js

The CSS for this example can be found in: JS_F_A1-A3-A4.css