jQuery 验证 ajax 不适用于验证码检查

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 结果时，它 return "true"，但验证插件警告错误消息。我的错误是什么？有人可以帮助我吗？

Answer 1

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

$.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

jQueryValidate 的开发人员没有尝试修复或解决该问题，而是已经解决了这些问题。只需使用 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.

中的可用选项

jQuery 验证 ajax 不适用于验证码检查

jQuery Validate ajax not working for Captcha check

jquery

jquery-validate