CODEWITHSUNDEEP
javascriptjqueryajax
user3350731
user3350731

Reputation: 972

AJAX Jquery Validation not working while submitting the form

Basically, I need to test if the sub-domain exists or not so I added a method uniqueSubdomain to my jQuery Validate rules: 

$.validator.addMethod("uniqueSubdomain", function(value, element) {
 $.ajax({
  type: "POST",
   url: "ajax.php",
   data: 'subdomain='+ value,
   cache: false,
success: function(msg)
{
alert(msg);
  // if the subdomain exists, it returns a string "true"
  if(msg == "true"){
    return false;  // already exists
  }else{
    return true;    // subdomain is free to use
  }      
 }
 })}, "sub-domain already exists!");

And in the rules : 

subdomain: {               
            required: true,
            uniqueSubdomain: true           
        },

But it seem that it only displays sub-domain already exists! Even if it doesn't exist! Any help with this, Thanks!

Upvotes: 0

Views: 664

Answers (4)

Hüseyin BABAL
Hüseyin BABAL

Reputation: 15550

Your validation and ajax is working at parallel. When your validation done, ajax may not finish. For this, you need to use async:false. and you can use following(tested);

$.validator.addMethod("uniqueSubdomain", function(value, element) {
    var domainOk = false
     $.ajax({
      type: "POST",
       url: "ajax.php",
       data: 'subdomain='+ value,
       cache: false,
       success: function(msg) {
          // if the subdomain exists, it returns a string "true"
          if(msg == "true"){
            domainOk = false
          }else{
            domainOk = true;
          }      
         }
     });
     return domainOk;
 }, "sub-domain already exists!");

Upvotes: 1

Asik
Asik

Reputation: 7977

Another perfect solution is, we need to return the flag for validation method.

$.validator.addMethod("uniqueSubdomain", function(value, element) {
    var isFlag;
    $.ajax({
      type: "POST",
       url: "ajax.php",
       async: false,
       data: 'subdomain='+ value,
       cache: false,
    success: function(msg)
    {
    //alert(msg);
      // if the subdomain exists, it returns a string "true"
      if(msg == "true"){
        isFlag =  false;  // already exists
      }else{
        //$("div.error").css({ display: "none" });
        isFlag = true;    // subdomain is free to use
      }      
     }
    });

    return isFlag;
 }, "sub-domain already exists!");

Upvotes: 1

tmarwen
tmarwen

Reputation: 16354

You are using an AJAX request to retrieve a result for your validation, BUT: the validation may have finished when the ajax returns a result becuase you are dealing with an asynchrounous call.

You need to make your ajax request synchrounous so the validation won't process utill a result is returned with async: false.

Something like:

$.validator.addMethod("uniqueSubdomain", function(value, element) {
  $.ajax({
    type: "POST",
    url: "ajax.php",
    data: 'subdomain='+ value,
    async: false,
    cache: false,
    success: function(msg)
    {
    alert(msg);
    // if the subdomain exists, it returns a string "true"
    if(msg == "true"){
      return false;  // already exists
    }else{
      return true;    // subdomain is free to use
    }      
  }
 })}, "sub-domain already exists!");

And since async option is deprecated you can solve it by performing a remote validation:

$( "#form" ).validate({
  rules: {
    subdomain: {
      required: true,
      uniqueSubdomain: true,
      remote: {
        url: "ajax.php",
        type: "post",
        data: 'subdomain='+ value
      }
    }
  }
});

Upvotes: 1

Asik
Asik

Reputation: 7977

Add the following line in false case

$("div.error").css({ display: "none" });

For your example

$.validator.addMethod("uniqueSubdomain", function(value, element) {
     $.ajax({
      type: "POST",
       url: "ajax.php",
       async: false,
       data: 'subdomain='+ value,
       cache: false,
    success: function(msg)
    {
    //alert(msg);
      // if the subdomain exists, it returns a string "true"
      if(msg == "true"){
        return false;  // already exists
      }else{
        $("div.error").css({ display: "none" });
        return true;    // subdomain is free to use
      }      
     }
    });
 }, "sub-domain already exists!");

FYI: I believe that your error container is "div", if not please change the below line as

$("errorContainer.error").css({ display: "none" });

Upvotes: 1

Related Questions