jQuery 验证器 addMethod 仅在第二次调用后有效

Question

我正在尝试使用 jquery 验证器 'addMethod' 来验证输入。主要目标是检查系统中是否存在当前用户 ID，如果存在则显示错误消息。为了检查用户是否存在，我对我的控制器进行了 ajax 调用，它 returns 是真还是假。

$("input[name='VATNumber']").blur(function () {

        var tbody = $(this).showLoading();

        var vatnumber = $(this).val();

        var svcUrl = "@Url.Action("CheckUserExistance", "User")";

        $.ajax({
            url: svcUrl + "?vatNumber=" + vatnumber,
            type: "GET",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            async: true,
            cache: true,
            error: function (xhr, err) {
                tbody.hideLoading();
                $.jGrowl("ERROR checking user.", { life: 5000, group: "error" });
            },
            success: function (result) {
                tbody.hideLoading();
                displayErrorMessage(result.data);

                //console.log(result);
                //if (result.data == false) { displayErrorMessage(); }
            }
        });

        function displayErrorMessage(result) {
            console.log(result);
            jQuery.validator.addMethod("checkUser", function (value) {
                return result == false;
            }, "User already exists.");

            jQuery.validator.classRuleSettings.checkUser = { checkUser: true };

            $("input[name='VATNumber']").validate();
        }

    });

问题是验证器没有在正确的时间显示消息，即使 'result' 变量是正确的。

有人可以帮忙吗？

更新

我试过这段代码，但还是不行。不考虑该请求。

var vatnumber = $("input[name = 'VATNumber']").val(),
        officeid = parseInt($("input[name='OfficeID']").val(), 10);
var svcUrl = "@Url.Action("CheckUserExistance", "User")";

    $('#mainForm').validate({
        rules: {
            VATNumber: {
                required: true,
                VATNumber: true,
                remote: {
                    url: svcUrl,
                    type: "post",
                    data: {
                        vatNumber: vatnumber,
                        officeId: officeid
                    }
                }
            }
        },
        messages: {
            VATNumber:  {
                remote: "User already exists."
            }
        }
    });

我正在使用 ASP.NET MVC 和 Bootstrap

HTML

    <div class="par control-group">
                    <label class="control-label" for="VATNumber">NIF</label>
                    <div class="controls">

<input class="input-large" data-val="true" data-val-maxlength="MaxLengthAttribute" data-val-maxlength-max="50" id="VATNumber" name="VATNumber" type="text" value="2345678">
                        <span class="field-validation-valid" data-valmsg-for="VATNumber" data-valmsg-replace="true"></span>
                    </div>
                </div>

脚本

$(document).ready(function () {

    //$("input[name='VATNumber']").addClass("checkUser");

    var vatnumber = $("input[name = 'VATNumber']").val(),
        officeid = parseInt($("input[name='OfficeID']").val(), 10);

    var svcUrl = "@Url.Action("CheckUserExistance", "User")";

    console.log(svcUrl + " " + vatnumber);

    $('#mainForm').validate({
        rules: {
            VATNumber: {
                required: true,
                remote: {
                    url: svcUrl,
                    type: "post",
                    // for troubleshooting
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.log('status: ' + textStatus); // status
                        console.log('error: ' + errorThrown); // error
                    },
                    complete: function (jqXHR, textStatus) {
                        // fires after the request, even if there is an error
                        console.log('ajax is finished: ' + textStatus);
                    }
                }
            }
        },
        messages: {
            VATNumber: {
                remote: "User already exists."
            }
        }
    });
});

Answer 1

您的代码...

$("input[name='VATNumber']").blur(function () {

    ....

    $.ajax({
        ....
    });

    function displayErrorMessage(result) {

        jQuery.validator.addMethod("checkUser", function (value) {
            return result == false;
        }, "User already exists.");

        jQuery.validator.classRuleSettings.checkUser = { checkUser: true };

        $("input[name='VATNumber']").validate();
    }

});

问题：

一切都在 blur 处理程序中。当 jQuery Validate 插件已经默认使用 focusout 处理程序时，我不确定你为什么需要这个。您可以完全消除 blur() 处理程序。
您已将 .validate() 方法附加到 input。你不能做这个。 .validate() 方法仅附加到 <form> 元素。
您已将 .validate() 方法放入嵌套在 blur 处理函数中的 displayErrorMessage 函数中。但是，.validate() 方法用于 初始化 表单上的插件，应该调用 once 并且仅在 DOM 就绪。
您还把 .addMethod() 放在嵌套在 blur 处理程序函数中的 displayErrorMessage 函数中。但是，.addMethod()方法用于creating/initializing新规则，应该调用一次且仅在 DOM 准备就绪。在这种情况下，您的新 rule/method 似乎没有在任何地方使用，不需要，甚至没有正确构造。
您的 .ajax() 完全独立于 jQuery 验证插件。但是，该插件已经包含一个名为 remote 的 ajax 方法，它的唯一功能是远程检查服务器；例如，检查用户名是否已经存在。

"The main goal is to check if the current user id exists in the system and if it does a error message is displayed."

那么您根本就不需要 .ajax() 或 .addMethod() 方法。只需正确实施 the remote rule/method.

$(document).ready(function() {

    $('#myform').validate({
        rules: {
            VATNumber: {
                required: true,
                remote: {
                    // your other options
                }
            }
        }
    });

});

您的服务器端代码可以 return 一个 true 或 false 指示通过或失败验证。或者，如果您 return 一个 JSON 编码的字符串，那么它验证失败并且 JSON 字符串自动成为验证消息。

另见：jQuery Validate remote method usage to check if username already exists

编辑:

基于编辑过的 OP 和他的评论...

$(document).ready(function() {  // <-- everything inside a DOM ready handler?

    $('#mainForm').validate({  // <-- 'mainForm' is ID of your <form></form>?
        rules: {
            VATNumber: {
                required: true,
                // VATNumber: true, // <-- NO SUCH METHOD/RULE
                remote: {
                    url: svcUrl, // <-- positively verify the URL
                    type: "post",
                    data: {
                        vatNumber: vatnumber,  // <-- redundant
                        officeId: officeid
                    },
                    // for troubleshooting
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        console.log('status: ' + textStatus); // status
                        console.log('error: ' + errorThrown); // error
                    },
                    complete: function(jqXHR, textStatus) {
                        // fires after the request, even if there is an error
                        console.log('ajax is finished: ' + textStatus);
                    }
                }
            }
        },
        ....
    });

});

Answer 2

尽管得到了@Sparky 的所有帮助（非常感谢）并且在运行没有想法之后，我和一个朋友谈过，他说尝试调用 ajax 里面的 addMethod。它比第一次尝试效果更好。所以这里是：

$(document).ready(function () {

    $("input[name='VATNumber']").addClass("checkUser");

    var vatnumber = $("input[name = 'VATNumber']").val(),
        officeid = parseInt($("input[name='OfficeID']").val(), 10);

    var svcUrl = "@Url.Action("CheckUserExistance", "User")";

    jQuery.validator.addMethod("checkUser", function (value, element) {
        var exists = false;
        $.ajax({
            url: svcUrl + "?vatNumber=" + value
                        + "&officeId=" + officeid,
            type: "GET",
            async: false,
            cache: false,
            error: function (xhr, err) {
                $.jGrowl("ERROR checking user.", { life: 5000, group: "error" });
            },
            success: function (result) {
                exists = result;
            }
        });
        return exists;
    }, "User already exists.");
    //});

    jQuery.validator.classRuleSettings.checkUser = { required: true, checkUser: true };
});

jQuery 验证器 addMethod 仅在第二次调用后有效

jQuery Validator addMethod only working after second call

ajax

jquery

jquery-validate