Ajax Form Validation and Thread-safe Ajax

This degradable form validation demo verifies the form at the server side on the classic form submit, and also implements AJAX validation while the user navigates through the form.

Degradable AJAX Form Validation

Doing a final server-side validation when the form is submitted is always a must. If someone disables JavaScript in the browser settings, AJAX validation on the client side won't work, exposing sensitive data, and thereby allowing an evil-intended visitor to harm important data back on the server (for example, through SQL injection). Always validate user input on the server!

This form validation application validates a registration form, using both AJAX validation (client side) and typical server-side validation:

* AJAX-style (on the client), when each form field loses focus (onblur). The field's value is sent to the server, which validates the data and returns a result (0 for failure, 1 for success). If validation fails, an error message will unobtrusively show up and notify the user about the failed validation.
* PHP-style (on the server), when the entire form is submitted. This is the usual validation you would do on the server, by checking user input against certain rules. If no errors are found and the input data is valid, the browser is redirected to a success page. If validation fails, however, the user is sent back to the form page with the invalid fields highlighted.

Both AJAX validation and PHP validation check the entered data against these rules:

* Username must not already exist in the database
* Name field cannot be empty
* A gender must be selected
* Email address must be written in a valid email format, such as xyz@domain.com
* Phone number must be written in standard US form: +xx xxxxxxxxx

Thread-Safe AJAX

A piece of code is thread-safe if it functions correctly during simultaneous execution by multiple threads. In this exercise, we need to make an asynchronous request to the server to validate the entered data every time the user leaves an input box or changes a selection.

The hidden danger behind this technique is only revealed if the user moves very quickly through the input fields, or the server connection is slow; in these cases, the web application would attempt to make new server requests through an XMLHttpRequest object that is still busy waiting for the response to a previous request (this would generate an error and the application would stop functioning properly).

Depending on the circumstances at hand, the ideal solution to this problem may be:

* Create a new XMLHttpRequest instance for every message you need to send to the server. This method is easy to implement, but it can degrade server's performance if multiple requests are sent at the same time, and it doesn't guarantee for the order in which you receive the responses.
* Record the message in a queue and send it later when the XMLHttpRequest object is able to make new requests. The requests are made in the expected order. Using a queue is particularly important in applications where the order of the messages is important.
* Schedule to automatically retry making the request after a specified amount of time. This method is similar to the one with the queue in that you don't make more than one server request at a time, but it doesn't guarantee for either the order in which the requests are made, or for the order in which the responses are received.
* Ignore the message.

In this form validation exercise, we use a message queue. When the user leaves an input element, a message to validate its value is added to the queue. When the XMLHttpRequest object is clear to make a new request, it takes the first message from the queue.

The queue is a First-In, First-Out (FIFO) structure, which guarantees that the messages are sent in the proper order. To get a feeling about how this works, go to the demo page, and press tab quickly multiple times, and then wait to see how the validation responses show up one by one.

The complete AJAX and PHP tutorial features even more AJAX web development examples.
Downlaod code


PHP and Ajax submit form