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:
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
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.
- 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
- In the ajax folder, create a folder named validate, which will host the exercises in this article.