Jquery validation async not working

Question

I have made this function, that seems to work fine, but it return "#" insted of wainting for the AJAX. I have tried to remove the return call, with out look.

It need to wait until the AJAX is finish before return. The JSP is working fine.

What is wrong?

jQuery.validator.addMethod("knidExist", function(value, element) {
    var valid = "#";
      $.ajax({
          async: false,
          type: "POST",
          url: "USER.jsp",
          data: "knid="+value,
          dataType: "html",
          success: function(msg) {
              // if the user exists, it returns a string "true"
              if($.trim(msg) != "true") {
                 //return false;
                 valid = false;  // already exists
              } else {
                 //return true;
                 valid = true;      // username is free to use
              }
          }  
     });
    return valid;
}, 'This USER does not exist');

The first A in AJAX stands for Asynchronous. Trying to make the function return after the call has finished is a very bad idea. You need to re-examine your approach instead. — Jon
– Jon, Commented Jan 13, 2012 at 15:04
@Jon - they have set async: false. They are trying to do the call synchronously. — jfriend00
– jfriend00, Commented Jan 13, 2012 at 15:14
@Jon - agreed. Synchronous ajax is evil. I would never use it myself. Locks up the browser. Your answer that allows use of async requests is probably a better way to go. Still, from a pure intellectual curiosity point of view, it isn't clear to me why what the OP has doesn't work. — jfriend00
– jfriend00, Commented Jan 13, 2012 at 15:18

Jon · Accepted Answer · 2012-01-13 15:11:02Z

6

Instead of adding your own validation method, you need to use the built-in remote validation method instead which is designed exactly for this purpose.

You would use it in a manner like

remote: {
    type: "POST", 
    url: "USER.jsp",  
    data: { knid: value },
}

Check out the examples the docs link to.

answered Jan 13, 2012 at 15:11

Jon

439k85 gold badges756 silver badges820 bronze badges

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

1 Comment

boje Over a year ago

I know this method, but i am going to use this validation method 100 times, so it will be good to make it as a method as the jquery validation also can do.

Mike · Accepted Answer · 2012-05-27 23:22:15Z

I found a method by my self. Almost a complete copy from the remote method but with static message and url. Hope i can help some one.

jQuery.validator.addMethod("userExist", function(value, element, param) {
if ( this.optional(element) )
    return "dependency-mismatch";

var previous = this.previousValue(element);
if (!this.settings.messages[element.name] )
    this.settings.messages[element.name] = {};
previous.originalMessage = this.settings.messages[element.name].remote;
this.settings.messages[element.name].remote = previous.message;

param = typeof param == "string" && {url:param} || param;

if ( this.pending[element.name] ) {
    return "pending";
}
if ( previous.old === value ) {
    return previous.valid;
}

previous.old = value;
var validator = this;
this.startRequest(element);
var data = {};
data["**user**"] = value;
$.ajax($.extend(true, {
    url: "validation.jsp",
    mode: "abort",
    dataType: "json",
    data: data,
    success: function(response) {
        validator.settings.messages[element.name].remote = "**This user do not exist"**;
        var valid = response === true;
        if ( valid ) {
            var submitted = validator.formSubmitted;
            validator.prepareElement(element);
            validator.formSubmitted = submitted;
            validator.successList.push(element);
            validator.showErrors();
        } else {
            var errors = {};
            var message = response || validator.defaultMessage( element, "remote" );
            errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;
            validator.showErrors(errors);
        }
        previous.valid = valid;
        validator.stopRequest(element, valid);
    }
}, param));
return "pending";
}, "");

Ajay · Accepted Answer · 2014-06-24 09:47:47Z

0

Making those request types of "Post" type causes the issue. this basically submits the value and did not wait for the response. -try making it of type "get" it will work.

answered Jun 24, 2014 at 9:47

Ajay

4,2514 gold badges29 silver badges47 bronze badges

Collectives™ on Stack Overflow

Jquery validation async not working

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related