JQuery Validation Plugin: Use Custom Ajax Method

Question

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

Community · Accepted Answer · 2017-05-23 12:01:49Z

13

You are doing an AJAX request, ergo: the validation is already finished working when your custom validator returns either true or false.

You will need to work with async. See also this post: How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request?

Lets say we have a custom validation to check the Unique Mobile, So we will add a new method as follows to check the unqiue Mobile no :

jQuery.validator.addMethod("uniqueMobile", function(value, element) {
    var response;
    $.ajax({
        type: "POST",
        url: <YOUR SERVER SCRIPT/METHOD>,
        data:"mobile="+value,
        async:false,
        success:function(data){
            response = data;
        }
    });
    if(response == 0)
    {
        return true;
    }
    else if(response == 1)
    {
        return false;
    }
    else if(response == 'logout')
    {
        return false;
    }
}, "Mobile is Already Taken");

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Nov 27, 2012 at 7:07

theCodeMachine

1,69114 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Grijesh Chauhan Over a year ago

can we use $.get() for this ?

theCodeMachine Over a year ago

yes you can use $.get() function as it is a abstract method to make a ajax call to the server through jQuery, but in that case you have to send your data for eg: "mobile="+value appended to the url you are requesting.

gfirem Over a year ago

async: false, will lock the interface

Azhar Uddin Sheikh Over a year ago

I am Getting an error response is not defined

Adam · Accepted Answer · 2010-04-04 01:17:18Z

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
            });

answered Apr 4, 2010 at 1:17

Adam

1,5813 gold badges15 silver badges25 bronze badges

Comments

oers · Accepted Answer · 2011-12-16 07:41:40Z

1

Try this:

$.validator.addMethod('unique', 
            function(value) {
         var result = $.ajax({ 
                             async:false, 
                             url:"http://yoursamedomain.com/checkemail",
                             data:'email='+ value, 
                             dataType:"text" }); 

         if(result .responseText) return true; else return false;

             } , "This email address has already been  registered");

edited Dec 16, 2011 at 7:41

oers

18.8k13 gold badges68 silver badges76 bronze badges

answered Dec 16, 2011 at 7:12

Udit

111 bronze badge

1 Comment

namtax Over a year ago

Hi, i really appreciate your response, I have moved on from this project so cannot apply your feedback. Im sure it will come in handy however, next time I am using jQuery. Thanks

Lukas Pierce · Accepted Answer · 2017-10-03 08:06:06Z

0

For serverside AJAX validation use remote rule. This is same as standard jQuery AJAX request object. Your server must returns string "true" for valid value or "false" for invalid, also it can passes some string "This email was already taken", and this will be perceived as invalid, and render as an error message:

$( "#myform" ).validate({
  rules: {
    email: {
      required: true,
      email: true,
      remote: {
        url: "check-email.php",
        type: "post",
        data: {
          username: function() {
            return $( "#username" ).val();
          }
        }
      }
    }
  }
});

Read documentation here remote-method

answered Oct 3, 2017 at 8:06

Lukas Pierce

1,3863 gold badges17 silver badges19 bronze badges

Collectives™ on Stack Overflow

JQuery Validation Plugin: Use Custom Ajax Method

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related