使用AJAX进行欧芹自定义远程验证

Question

我在我们的require配置中因为AMD而无法实现parsley.remote.js.

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

问题是,无论AJAX请求返回什么,我都会得到错误的响应.

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

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调用,但如果在AJAX调用中添加async:false选项,则代码应该起作用:

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');