jquery - 使用 AJAX 进行 Parsley 自定义远程验证

Question

由于我们的 require 配置中存在 AMD，我在实现 parsley.remote.js 时遇到了麻烦。

我正在尝试实现一个自定义验证器，它执行 AJAX 请求并根据响应返回 true 或 false。

问题是，无论 AJAX 请求返回什么，我都会收到 false 响应。

为什么这段代码永远不起作用？

window.ParsleyValidator.addValidator('cardcode', 
    function (value) {
        var valid = false;
        $.ajax({
            url: '/data/checkout/cvvCheck.json',
            data: {
                cvv: value
            },
            success: function(response) {
                if(response.valid === true) {
                    return true;
                }
                else {
                    return false;
                }
            }
        });
    }, 32);

<input type="tel" name="card-code" id="card-code" maxlength="4" required="" data-parsley-required="true" data-parsley-required-message="Please enter the cvv" data-parsley-type="number" data-parsley-type-message="Please enter a valid cvv" data-parsley-cardcode="true" data-parsley-cardcode-message="Please ensure you are entering the correct cvv." data-parsley-id="65">

Answer 1

问题在于，对远程验证器的 AJAX 调用是异步进行的，这意味着您的响应对于 Parsley 来说返回得太晚了，因此它始终会假设验证结果为错误。

同步 AJAX 调用应该是 avoided ，如果您将 async: false 选项添加到 AJAX 调用中，您的代码应该可以正常工作:

window.ParsleyValidator.addValidator('cardcode', 
    function (value) {
        var valid = false;
        $.ajax({
            url: '/data/checkout/cvvCheck.json',
            data: {
                cvv: value
            },
            async: false,
            success: function(response) {
                if(response.valid === true) {
                    return true;
                } else {
                    return false;
                }
            }
        });
    }, 32);

这是一个我发现对我有用的异步方法 - 您需要加载 parsley.remote.min.js而不是 parsley.min.js，然后使用以下代码设置自定义远程验证器:

window.Parsley.addAsyncValidator('cardcode', function (xhr) {
    var response = xhr.responseText;
    if (response.valid === true) {
        return true;
    } else {
        return false;
    }
}, '/data/checkout/cvvCheck.json');