JQuery Validation Plugin: Use Custom Ajax Method

Question

Hi

Looking for some assistance with the Jquery form validation plugin if possible.

I am validating the email field of my form on blur by making an ajax call to my database, which checks if the text in the email field is currently in the database.

    // Check email validity on Blur
       $('#sEmail').blur(function(){
       // Grab Email From Form
       var itemValue = $('#sEmail').val();
        // Serialise data for ajax processing
        var emailData = {
            sEmail: itemValue
        }
        // Do Ajax Call
         $.getJSON('http://localhost:8501/ems/trunk/www/cfcs/admin_user_service.cfc?method=getAdminUserEmail&returnFormat=json&queryformat=column', emailData, function(data){

                    if (data != false) {
                        var errorMessage = 'This email address has already been  registered';
                    }
                    else {
                        var errorMessage = 'Good'
                    }
                })
    });

What I would like to do, is encorporate this call into the rules of my JQuery Validation Plugin...e.g

    $("#setAdminUser").validate({
      rules:{
             sEmail: {
                  required: function(){
                  // Replicate my on blur ajax email call here
                 }                  
             },
            messages:{
                sEmail: {
                    required: "this email already exists"       

            }
        });

Wondering if there is anyway of achieving this? Many thanks

Answer 1

You can add a custom validation method like this

 $.validator.addMethod('unique',
                     function(value) {
        $.get('http://localhost:8501/ems/trunk/www/cfcs/admin_user_service.cfc','?method=getAdminUserEmail&returnFormat=json&queryformat=column&emailData='+ value,
                            function(return_data) {
                                return return_data;
                            })
                         }
                         , "this email already exists"
                    );

then add the unique class to your email field or you can use something like this

$.validator.addClassRules("unique-email", {
                unique: true
            });