How to Create Interactive Form Validation Using Ajax

I’m sure you’ve seen those nice interactive form validations on some Web 2.0 websites. The validation occurs while you’re typing your form input. For example, you’re typing your email in the email address field. You see a red “X” mark beside the field and when you’re finished typing your email address, a green check mark replaces the red “X” mark. What happens there is while you’re typing in your email address, the page communicates with the server to validate what you’re typing. When you finished typing your email address and the data you keyed in is valid, it passes the validation so it shows the green check mark without reloading the page. This is done using Ajax.

In this tutorial, you’re going to learn how to make this kind of interactive, Ajax-powered form validation (the same validation sample mentioned earlier). If you haven’t used Ajax before, don’t worry because I will show you how you can create Ajax-powered applications without worrying about the whole XmlHttpRequest process. If you can program with PHP and a little Javascript, you’re good to go. All you need is this handy little open-source Ajax toolkit called Sajax.

So the first thing you need to do is download the Sajax toolkit. Unzip the archive file and find the file named “Sajax.php”, since we’ll be using it in a PHP application. It is located under a folder named “php”. Inside that folder, you’ll also find some code samples. Sajax supports other server-side scripting languages as well like ASP, Perl, Python, and others. Upload the “Sajax.php” file into your webserver in a directory accessible by the PHP form validation script that you’re going to make. The sample code below show’s the implementation of an email validation script using PHP, Javascript, and Sajax. Examine the script to see how it works. I placed lots of comments to help you out.

<?php

# Include the Sajax toolkit
require(“Sajax.php”);

# Define the email validation function
function validate($email) {
    if (preg_match(
    ‘/^[_A-z0-9-]+((\.|\+)[_A-z0-9-]+)*@[A-z0-9-]+(\.[A-z0-9-]+)*(\.[A-z]{2,4})$/’,
    $email)) {
        return ‘Valid’;
    } else {
        return ‘Invalid’;
    }
}

# Initialize Sajax
sajax_init();
# Export the server-side function to Sajax
sajax_export(‘validate’);
# Handle client request
sajax_handle_client_request();

?>

<html>
<head>
    <script type=“text/javascript”>
    <?php
        # Sajax toolkit generated javascript code
        sajax_show_javascript();
    ?>
    // Sends the email input to the server-side function
    // and throws the return value to showValidation.
    function js_validate(email) {
        x_validate(email, showValidation);
    }
    // Prints the return value on the screen.
    // Changes the container’s font color to green
    // if the return value is “Valid” and
    // to red if not.
    function showValidation(html) {
        var element = document.getElementById(‘validation’);
        element.innerHTML = html;
        if (html==‘Valid’)
            element.style.color = ‘green’;
        else
            element.style.color = ‘red’;
    }
    </script>
</head>
<body>
    <form>
    Email:
    <input type=“text”
    onkeyup=“js_validate(this.value)” name=“email” />
    <span style=“font-weight:bold;” id=“validation”></span>
    </form>
</body>
</html>

Imports the Sajax toolkit.

Defines the function that will validate the email address input by the user.

The next 3 lines, to summarize, exports the server-side function so it can be called through Javascript.

The next lines display the HTML web page.

Inside the header and script tags, you’ll find the call to sajax_show_javascript. This outputs all the Javascript code necessary to utilize the server-side function.

The Javascript function js_validate sends the email input to the server side function, catches the return value and throws it to the other Javascript function - showValidation. Within this function definition, you’ll notice the call to a function “x_validate”. This Javascript function is generated by Sajax. It calls the server-side function “validate” and passes the parameter, “email”. The last parameter of x_validate is the name of the function that will receive the return value of the server-side function. When you call a server-side function using Javascript and Sajax, you simply add a prefix “x_” to the function name. The parameters are the same as the server-side function but you need to add one parameter at the end. This is the name of the Javascript function that will receive the return value. If this parameter is left out, no return values will be handled.

The Javascript function showValidation simply puts this return value (”Valid” or “Invalid”) in the container “validation”. Also, if the return value is “Valid”, this function changes the font color of the container to green. Otherwise, it sets the font color to red.