Chapter 12. Client-Side Validation

Client-side validation in web-based forms is an interaction designer's dream. It is a great way to inform users of their progress as they are using the form, rather than letting them get to the very end, only to discover they have a bunch of fields that must be updated with valid information. The problem here is that all forms are different, and what is valid in one may not be valid in another. If the forms are from different websites, we could just forget about finding any consistencies. This may not be incredibly surprising information and may seem like a battle not worth fighting, but if more developers were to use client-side validation, the Web would be a more form-friendly environment. Users would never be left wondering what information to enter into a field because the form would be smart enough to inform them on the spot before they even attempted to submit it.

This chapter will cover client-side validation with a combination of simple JavaScript and Ajax to inform users of valid and invalid information on the spot as they tab or click out of specified form elements.