Realtime Form Validation Using Ajax

   
By Greg Murray, April 2006  

Articles Index

Editor's Note: This article is taken from the The Java BluePrints Solutions Catalog, a new project from the Java BluePrints program. The Java BluePrints program consists of a set of guidelines and best practices, as well as small applications to illustrate these guidelines on both the J2EE 1.4 and 1.5 platforms.

If you've ever entered form data on the Internet, you've likely encountered cases where server-side processing is used to validate that the data meets a specified set of criteria. JavaScript may be used on the client-side to validate the format of simple data such as email addresses, phone numbers, dates, or credit card numbers. However, client-side processing is limited in that it cannot apply business rules or access server-side data sources to perform that validation.

Consider some of the following use-cases:

  • You need to validate whether a user name has already been registered when creating an online account
  • You need to validate a serial number or coupon code that requires special business logic
  • You need to validate data in conjunction with real-time data that exists on the server or database

Traditional web applications require that the form data be posted to the server. This is followed by some sort of back-end processing of that data, and finally an HTML page refresh that yields the results of the post. However, this strategy can be distracting to the end user, especially in cases where a single form field is invalid and the user has to re-enter a large set of form data. Hence, the problem becomes:

Problem: "How do you validate form data requiring server-side logic without refreshing the HTML page?"

Using Asynchronous JavaScript and XML (Ajax) interactions, data may be validated in near real-time as the user types the data in an HTML form. In this case, form data is validated asynchronously, which allows the HTML page to continue processing events while the form data is being validated by a server-side component in the background. If the form data does not match what is required by the server-side logic, the user knows immediately and can change it without having to refresh the HTML page.

Using the XMLHttpRequest Object and Servlet to Validate Form Data

This solution follows a simple strategy:

  1. First, an Ajax validation on the client is initiated by an HTML JavaScript event, such as a key press in a form field or a form field losing focus. A JavaScript function then creates and configures an XMLHttpRequest object - this object includes the URL to call, the form data to be validated (which may be sent as URL parameters), and a callback function. In this example, the URL the XMLHttpRequest object calls is mapped to a servlet. After sending the XMLHttpRequest, the HTML page continues processing events.
  2. On the server side, the servlet receives the request and extracts the form parameters to be validated using the Java Servlet API. The servlet then applies any necessary business logic to validate the form data, and finally returns an XML document to the XMLHttpRequest object that indicates whether or not the form data is valid.
  3. Once the response is received, the XMLHttpRequest object calls its pre-configured callback function. This function updates the HTML page based on the XML document that was returned from the server. The portions of the page that are updated are re-rendered immediately and the user can see the whether or not the form data is valid

The following images show the direct feedback to the client in the HTML page.

 
Figure 1: A Valid User ID Response

The client will see that the user ID is valid as the ID is being entered.

 
Figure 2: An Invalid User ID Response

The end result: when an invalid user ID is entered, the user will know right away. Notice that the "Create Account" button is also disabled in cases where there are invalid IDs.

A Simple Validation Example

At this point, let's walk through a sample application that uses Ajax to dynamically check form field data before a form is posted. Here is the client and server code needed to perform the interaction.