Tweet33 Shares Share0 Tweets10 Comments
This article follows on from Web Services using XMLHttpRequest (Ajax) and demonstrates the usage of our AjaxRequestXML.js class for validating online forms.
Real-time Form Validation using Ajax
If you enter an invalid Email address, or a value for Age outside the specified range, a red warning message will appear and form will not be able to be submitted. Similarly, when you enter a valid value the message will be green. When all fields have been validated the form will be able to be submitted.
Samples of the XML files returned in each case can be found below. These are generated by PHP, but another server-side scripting language would also work.
The onSubmit handler for the form requires also that a value be entered in all fields before the form can be submitted.
The field input is tested using Ajax when the event is triggered (when the input value changes and the focus moves to another element). We could have also used but that's more resource-intensive as it's called even when the value hasn't been modified.
The field is checked whenever it's event is triggered - every time a key is pressed and released while the focus is on that element.
Generally is the best option when validating forms, or if you want to control the input character by character.
The markup for the HTML form used in the example is as follows:
Within this code you can see that the Email input field is marked up as follows:
We assign an to the input box ('email'), to the associated checkbox ('valid_email) and to the DIV where the feedback text is to appear ('rsp_email'). These elements can then be referenced in the XML file that is returned by the Ajax call.
The 'empty comment" in the DIV is just a place-holder - required in some older browsers when a DIV is empty, but needs later to be referenced by a script.
When we call the function we pass three parameters: the method (in this case 'checkEmail' or 'checkAge') to use for testing, the value to test, and the id of the input field (target). The target value is also used to work out the id of the relevant checkbox and the DIV that will display feedback.
The PHP script that does the processing in this case, accepts the three variables (method, value, target) in POST format and uses them to generate an appropriate response in XML format. We won't go into the details of how the script actually does this as that's been covered elsewhere (see links below).
For an Age input value of 12 the validation script returns the following XML document:
The commands executed then in this case are as follows:
- Set content of the div to "Sorry, 12 is too young";
- Set color of the div to "red";
- Set the property of the checkbox for the age to ;
- Set the focus back to the input.
For an Age input value of 30 (or any number between 16 and 100) the XML returned is similar, but displays a positive message in green and marks the age input as valid using the checkbox.
The commands executed are as follows:
- Set content of the div to "30 is just right!";
- Set color of the div to "green";
- Set the property of the checkbox for age to .
As discussed previously, all values need to match s of elements in the HTML document. See the article Web Services using XMLHttpRequest (Ajax) for details on all avaiable commands and their parameters.
The validate.php script
A couple of people have already asked for a copy of the script referred to in these examples.
For those having trouble getting started, here's a walk-through:
And here's some of the code that generates the XML response:
Hopefully that solves the problems some people have had implementing the code.
Putting it all together
A few people have commented that this is all a bit confusing when it comes to implementing it on your own website. That's hardly surprising given the mix of technologies so I've created a graphic (below) showing how the different files fit together and what goes where:
The other two files (represented in the graphic in green) can be downloaded or copied from this site and included from your files as indicated.
Pros and Cons of using Ajax?
If you want to do a calculation that can only be done server-side (eg. checking that a username is unique in your database) or you want to update the DOM with data from another script or site then Ajax is the perfect tool. But you still have to cater for (or choose to exclude) non-compatible browsers.
Related Articles - Ajax
Send a message to The Art of Web:
press <Esc> or click outside this box to close