Basic Form Validation Using Ajax

 

Form validation is usually carried out in JavaScript within the browser of the client computer. Using this technique, user-entered data can be easily and quickly checked for valid data formats.

 

What we cannot do entirely on the client side, unfortunately, is check for specific data on the server - for instance, we cannot check whether a username selected by our site visitor has already been taken by another person.

 

In this tutorial we'll use this as an example of Ajax form validation, fitted neatly into the standard JavaScript form validation routines. If you're new to Ajax, you may want to review the Basics and Tutorials pages before we set off.

 

The Steps Involved

 

Do carry out this little Ajax task, we need to fulfill the following steps:

• Instantiate our XMLHTTPRequest JavaScript object
• Write a server-side script checkuser.php to return a code indicating whether the user-entered name already exists on the server
• Add a suitable JavaScript function to be called during our form validation routine, that will call the server side routine
• Write a callback routine to allow or disallow the form submission as required

The HTML Form

Here's the basic HTML form we'll use for our project, before any of the JavaScript is added:

<form method="post" action="targetpage.php" name="myform">
Enter Username: <input type="text" name="uname"><br />
Enter Nickname: <input type="text" name="nick"><br />
<input type="submit" value="Submit the Form">
</form>

We have two data entry fields, called uname (we'll check this against the database of users via Ajax) and nick (for comparison, we'll use client-side form validation to make sure that the user hasn't left this blank).

Next we'll start adding the JavaScript we need to carry out our Ajax validation.

Let's get to it.

Next >>>