Developing the Client-Side Code for Server-Side Data Validation with AJAX

Introduction

As you'll probably remember if you read the first article of this series, I started this three-part tutorial by demonstrating how a good combination of AJAX and a few PHP data checking routines can be used for constructing a decent form validation mechanism. Since I intended to bring you an easygoing guide for how to create such a system, over the first article I created a simple online form, in conjunction with some CSS declarations. My plan was to implement this data verification system from scratch, and add progressively the different layers that make up the complete AJAX application.

Now that the (X)HTML markup is defined, and a simple web form is available for testing, over this second article I'll show you the concrete definitions for all the pertinent JavaScript functions. These functions will be tasked with sending out HTTP requests in the background and handling all the events generated when a user enters data into the corresponding text boxes. For this reason, I like to think of them as the workhorses of the data validation system.

By the end of this installment, you will know how to use AJAX for calling some PHP classes, handy for checking user-supplied input on the server. You'll also have expanded your existing background on AJAX by integrating a few additional concepts, like using the popular "responseText" property of requester objects, and creating callback functions on the client which are capable of processing the disparate responses generated on the web server.

If all the benefits that I mentioned before sound good to you, then it's time to start learning how AJAX can assist you in performing server-side data validation. The experience won't be the shortest, but it will be fun. So, let's get going!