Jquery Advanced Ajax validation with CAPTCHA

jQuery offers a plugin called validate which will allow you to create stunningly user friendly sign up forms, login addresses, contact forms and much more. The plugin is written and maintained by Jörn Zaefferer, a member of the jQuery team, lead developer on the jQuery UI team and maintainer of QUnit. In this tutorial I’m going to teach you how to create a signup form with advanced AJAX validation and CAPTCHA.

To start, we’ll go ahead and create a simple signup form with CSS.

Next, we add jquery with the Validate plugin.

Next we start building the validate function. This will specify which input elements require validation and also the type of validation to invoke. This also handles the captcha params.

The validate documentation can be found at jQuery Validate.

var validator = $("#signupform").validate({
 
rules: {
 
username: {
    required: true,
    minlength: 5
    },
 
captcha: {
    required: true,
    remote: "includes/process.php"
        },
 
password: {
    required: true,
    minlength: 5
    },
 
passwordconfirm: {
    required: true,
    minlength: 5,
    myEqual: true
    },
 
email: {
    required: true,
    email: true
    }
}, messages: {
 
captcha: "Correct captcha is required. Click the captcha to generate a new one",
 
       username: {
                        required: "Enter a username",
            minlength: jQuery.format("Enter at least {0} characters"),
 
            },
 
            password: {
                required: "Provide a password",
                rangelength: jQuery.format("Enter at least {0} characters")
            },
 
       passwordconfirm: {
                required: "Provide a password",
                rangelength: jQuery.format("Enter at least {0} characters")
            },
 
         email: {
                required: "Please enter a valid email address",
                minlength: "Please enter a valid email address"
            }
 
        },
        // the errorPlacement has to take the table layout into account
        errorPlacement: function(error, element) {
            if ( element.is(":radio") )
                error.appendTo( element.parent().next().next() );
            else if ( element.is(":checkbox") )
                error.appendTo ( element.next() );
            else
 
                error.appendTo( element.parent().next() );
        },
 
                submitHandler: function() {
            alert("submitted!");
        },
 
        // specifying a submitHandler prevents the default submit, good for the demo
        // set this class to error-labels to indicate valid fields
        success: function(label) {
            // set   as text for IE
            label.html("").addClass("checked");
                          //  form.submit();
        }
    });
 
  });

Using Captcha

The captcha uses PHP sessions and PHP’s image functions to generate the captcha image. While javascript invokes an ajax call to another PHP script which will test if the captcha is valid and return true.

The following will generate the captcha image.

This section of code generates the captcha key:




IMPORTANT: You must do server side checking against the session captcha key to ensure that if the validation has been disabled your system will still be secure.
Full source and demo are available below, again any comments, questions, remarks or corrections in the comment section below.