jQuery validation plugin validation custom method needs to return result of $.ajax call

I'm using the jQuery validation plugin. It works great, an impressive tool. A couple of the 88 fields on the form I've got need to use APIs on other websites. I already found that I can't do that directly from javascript because it violates the same origin policy. So instead, it makes $.ajax calls to my own website (which, in turn invokes the APIs through curl).

The jQuery validation plugin lets you define validation methods by calling jQuery.validator.addMethod(name, method [, message ] )

The name is a string that will be used to identify the function to be called for a particular field specified in the configuration. The method is a function definition returning a boolean, and parameters consisting of the field's current value, the DOM element for the field, and params to be passed to the method.

So in my validation method, I need to make a $ajax call, process the result, and return true or false to my caller. I don't get to tell my caller to pass me functions to call for valid or invalid, I have to return a boolean to my caller. I've read the answers to this question and others like it, and as far as I can tell, all of them involve triggering a call to another function with the result of the $.ajax() call (whether using promises or callbacks) - none of them get the result back to the caller of $.ajax(), unless you pass async: false to $.ajax(). Am I missing something? Or should I tell the maintainers of the plugin that they defined a poor interface for custom validation functions :-)?

CodePudding user response：

There is no need to define a custom rule for this. "jQuery validation" already has a built in remote method for such a scenario. Try this

Example 1: Makes the email field required, an email and does a remote request to check if the given address is already taken.

$( "#myform" ).validate({
  rules: {
    email: {
      required: true,
      email: true,
      remote: "check-email.php"
    }
  }
});

Example 2: Makes the email field required, an email and does a remote request to check if the given address is already taken. In addition, the http method is set to "post" and the username is sent alongside the email address.

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

The remote method in the above example is what you're looking for. The value of the remote property accepts the same properties as that of jQuery's $.ajax() method.

On the server, you can return "true" to indicate that the validation passed, "false" for fail or a string to display a custom error message.