jQuery验证ajax不适用于Captcha检查

Question

这是我的代码：

$.validator.addMethod('checkCaptcha', function(value) {
     $.ajax({
           type: 'POST',
           headers: {"cache-control": "no-cache"},
           url: baseURI + '/ajax-process/?rand=' + new Date().getTime(),
           async: true,
           cache: false,
           dataType: "json",
           data: 'controller=validate_captcha&c_value=' + value,
           success: function (jsonData) {
                  console.log(jsonData.check_result) // It return true.
                  if (jsonData.check_result) {
                      return true;
                  }
                  reuturn false;
           },
           error: function (XMLHttpRequest, textStatus, errorThrown) {
                  reuturn false;
          }
    });
    return false;
}, 'Captcha invalid!');

$('#order_form_wrap').validate({
     rules: {
         'order_form[captcha]': {
                checkCaptcha:true
         }
     }
});

当我记录jsonData结果时，它返回“true”，但验证插件警告错误消息。我的错误是什么？有人可以帮帮我吗？

Answer 1

这是你的逻辑构造的一个问题... ajax()是异步的，所以你的函数的最后一行是在你的false完成之前返回ajax()。

$.ajax({
    ....
    success: function (jsonData) {
        ....
        if (jsonData.check_result) {
            return true;
        }
        reuturn false; // <-- misspelled "return"
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        reuturn false; // <-- misspelled "return"
    }
});
return false;  // <-- this fires before your ajax

jQuery Validate的开发人员已经解决了这些问题，而不是试图修复或解决这个问题。只需使用the built in remote method ......

$('#order_form_wrap').validate({
     rules: {
         'order_form[captcha]': {
             remote: {
                 type: 'POST',
                 headers: {"cache-control": "no-cache"},
                 url: function() {
                     return baseURI + '/ajax-process/';
                 },
                 // async: true,      // default
                 // cache: false,     // 'false' only works with HEAD and GET, see docs 
                 // dataType: "json", // default
                 data: {
                     rand: function() {
                         return new Date().getTime();
                     },
                     controller: function() {
                         return 'validate_captcha';
                     },
                     c_value: function() {
                         return value;
                     }
                 }
             }
         }
     },
     messages: {
        'order_form[captcha]': {
            remote: 'Captcha invalid!'
        }
    }
});

See ajax() docs在remote内有可用的选项。