AJAX Jquery Validation not working while submitting the form

Question

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!

Sorry but I don't think that extracting the value or the issue here since the AJAX request respond with false and it still the same !! — user3350731
– user3350731, Commented Apr 9, 2014 at 11:02
Your ajax req is true, You need to check your php service. Have you checked network tab for ajax response? You said it is not exists but what is the response from ajax? I think your ajax response is always returns true. Post your php code to your question — Hüseyin BABAL
– Hüseyin BABAL, Commented Apr 9, 2014 at 11:02
When a type an non-exist sub-domain my ajax req response comes as false & alert(msg) (means it doesn't exist) but it still the same display "sub-domain already exists!" !! — user3350731
– user3350731, Commented Apr 9, 2014 at 11:12

tmarwen · Accepted Answer · 2014-04-09 11:13:32Z

1

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

edited Apr 9, 2014 at 11:13

answered Apr 9, 2014 at 11:01

tmarwen

16.5k5 gold badges48 silver badges65 bronze badges

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

1 Comment

user3350731 Over a year ago

I totally agree with you but, I don't get it that when a type an non-exist sub-domain my ajax req response comes as false & alert(msg) (means it doesn't exist) but it still the same display "sub-domain already exists!" !!

Asik · Accepted Answer · 2014-04-09 11:13:13Z

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

Asik · Accepted Answer · 2014-04-09 11:19:17Z

1

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!");

answered Apr 9, 2014 at 11:19

Asik

7,9674 gold badges30 silver badges35 bronze badges

2 Comments

user3350731 Over a year ago

When I type a sub-domain that already exist it doesn't display anything, but as soon as I type an non-existed sub-domain it display Please fix this field.

Asik Over a year ago

I have checked it in FF, IE11, Chrome & Safari and its working fine. Could you please clear cache and check it again?

Hüseyin BABAL · Accepted Answer · 2014-04-09 11:20:35Z

1

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!");

answered Apr 9, 2014 at 11:20

Hüseyin BABAL

15.6k5 gold badges53 silver badges74 bronze badges

Collectives™ on Stack Overflow

AJAX Jquery Validation not working while submitting the form

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related