The server is the last line of defense against invalid data, so even if you implement client-side validation, server-side validation is mandatory. The JavaScript code that runs on the client can be disabled permanently from the browser's settings and/or it can be easily modified or bypassed.

Implementing AJAX form validation

The form validation application we will build in this article validates the form at the server side on the classic form submit, implementing AJAX validation while the user navigates through the form. The final validation is performed at the server, as shown in Figure 5-1:

Doing a final server-side validation when the form is submitted should never be considered optional. If someone disables JavaScript in the browser settings, AJAX validation on the client side clearly won't work, exposing sensitive data, and thereby allowing an evil-intentioned visitor to harm important data on the server (for example, through SQL injection).

Always validate user input on the server.

As shown in the preceding figure, the application you are about to build validates a registration form using both AJAX validation (client side) and typical server-side validation:

• AJAX-style (client side): It happens when each form field loses focus (onblur). The field's value is immediately sent to and evaluated by the server, which then returns a result (0 for failure, 1 for success). If validation fails, an error message will appear and notify the user about the failed validation, as shown in Figure 5-3.
• PHP-style (server side): This is the usual validation you would do on the server—checking user input against certain rules after the entire form is submitted. If no errors are found and the input data is valid, the browser is redirected to a success page, as shown in Figure 5-4. If validation fails, however, the user is sent back to the form page with the invalid fields highlighted, as shown in Figure 5-3.

Both AJAX validation and PHP validation check the entered data against our application's rules:

• Username must not already exist in the database
• Name field cannot be empty
• A gender must be selected
• Month of birth must be selected
• Birthday must be a valid date (between 1-31)
• Year of birth must be a valid year (between 1900-2000)
• The date must exist in the number of days for each month (that is, there's no February 31)
• E-mail address must be written in a valid email format
• Phone number must be written in standard US form: xxx-xxx-xxxx
• The I've read the Terms of Use checkbox must be selected

Watch the application in action in the following screenshots:

XMLHttpRequest, version 2

We do our best to combine theory and practice, before moving on to implementing the AJAX form validation script, we'll have another quick look at our favorite AJAX object—XMLHttpRequest.

On this occasion, we will step up the complexity (and functionality) a bit and use everything we have learned until now. We will continue to build on what has come before as we move on; so again, it's important that you take the time to be sure you've understood what we are doing here. Time spent on digging into the materials really pays off when you begin to build your own application in the real world.

Our OOP JavaScript skills will be put to work improving the existing script that used to make AJAX requests. In addition to the design that we've already discussed, we're creating the following features as well:

• Flexible design so that the object can be easily extended for future needs and purposes
• The ability to set all the required properties via a JSON object

We'll package this improved XMLHttpRequest functionality in a class named XmlHttp that we'll be able to use in other exercises as well. You can see the class diagram in the following screenshot, along with the diagrams of two helper classes:

• settings is the class we use to create the call settings; we supply an instance of this class as a parameter to the constructor of XmlHttp
• complete is a callback delegate, pointing to the function we want executed when the call completes

The final purpose of this exercise is to create a class named XmlHttp that we can easily use in other projects to perform AJAX calls.

With our goals in mind, let's get to it!

Time for action – the XmlHttp object

1. In the ajax folder, create a folder named validate, which will host the exercises in this article.