Question

我正在尝试使用jquery验证器'addMethod'验证输入。主要目标是检查系统中是否存在当前用户ID，是否显示错误消息。要检查用户是否存在，我对我的控制器进行ajax调用，它返回true或false。

$("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>

SCRIPT

$(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()方法放在displayErrorMessage函数内，该函数嵌套在blur处理函数中。但是，.validate()方法用于 初始化 表单上的插件，应该被称为一次，并且只能在DOM就绪。
您还将.addMethod()置于displayErrorMessage函数内，该函数嵌套在blur处理函数中。但是，.addMethod()方法用于 创建/初始化 新规则，应该称为一次，并且只能在DOM就绪。在这种情况下，您的新规则/方法似乎不会在任何地方使用，也不需要，甚至不能正确构建。
您的.ajax()完全独立于jQuery Validate插件。但是，该插件已经包含一个名为ajax的{{1}}方法，其唯一的功能是远程检查服务器;例如，检查用户名是否已存在。

“主要目标是检查系统中是否存在当前用户ID，是否显示错误消息。”

然后你根本不需要remote或.ajax()方法。只需正确实施the remote rule/method。

.addMethod()

您的服务器端代码可以返回$(document).ready(function() { $('#myform').validate({ rules: { VATNumber: { required: true, remote: { // your other options } } } }); });或true，表示验证通过或失败。或者，如果返回JSON编码的字符串，则验证失败，JSON字符串自动成为验证消息。

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

修改：

根据已编辑的OP及其评论......

false

Answer 2

尽管得到了@Sparky的帮助（非常感谢你）并且在用完了想法之后，我和一位朋友交谈，他说要尝试在addMethod内调用ajax。它比第一次尝试更好。所以这就是：

$(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 Validator addMethod仅在第二次调用后才能工作

2 个答案: