jQuery 验证 showErrors 块 highlight/unhighlight

Question

在我看来，jquery-validation showErrors 阻止了突出显示和取消突出显示的操作。

在 html 我有一个必需的表单组：

        <form id="ValidationForm" method="post" class="form-horizontal" role="form" novalidate="novalidate">
                        <div class="form-group required">
                            <label class="col-xs-3 control-label" for="Letters">Letters</label>
                            <div class="col-xs-9 controls">
                                <input class="form-control input-md" id="Letters" name="Letters" type="text" placeholder="Letters" />
                            </div>
                        </div>
                       <div class="col-xs-4">
                            <input id="btnSave" class="btn btn-default" type="submit" value="Save Changes" name="btnSave">
                        </div></form>

在 javascript 中，我定义了验证器的规则：

var rules = {
    rules: {
        "Letters": { required: true }
    },
    submitHandler: function (form) {
        $('#btnSave').prop("disabled", true);
        form.submit();
    },
    highlight: function (element, errorClass) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function (element, errorClass) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    showErrors: function(errorMap, errorList) {
        $.each(this.successList, function(index, value) {
            return $(value).popover("hide");
        });
        return $.each(errorList, function(index, value) {
            var _popover;
            _popover = $(value.element).popover({
                trigger: "manual",
                placement: "auto",
                content: value.message,
                template: "<div class=\"popover\"><div class=\"arrow\"></div><div class=\"popover-inner\"><div class=\"popover-content\"><p></p></div></div></div>"
            });
            _popover.data("bs.popover").options.content = value.message;
            return $(value.element).popover("show");
        });
    }
};
$("#ValidationForm").validate(rules);

如果我删除 showErrors 并按下提交按钮，表单组将添加 "has-errors" class 并且输入边框显示为红色。添加 showErrors 后，此突出显示功能将消失。有什么想法吗？

Answer 1

It appears to me that the jquery-validation showErrors blocks the action of highlight and unhighlight.

我不完全确定你想要达到什么最终效果，因为你从来没有解释过。但是，highlight 和 unhighlight 选项仅用于控制当消息应该出现在输入旁边时发生的情况。而 showErrors option 用于创建页面上某处所有错误的集中定位摘要。我不知道您要如何或为什么要同时使用这两者，而且我不完全确定一个选项如何 "block" 另一个。

查看 showErrors 函数中的代码后，您似乎在尝试为每条消息创建弹出效果。在这种情况下，showErrors 不是用于此目的的正确选择。

您希望对工具提示或弹出窗口使用 errorPlacement and success 选项。当每个错误发生时，这些选项一次对每个输入操作一个，而 showErrors 将在表单上的任何地方出现错误时触发。

errorPlacement: function (error, element) {
    // put text of error into tooltip with $(error).text()
    // show tooltip
},
success: function (label, element) {
    // hide the tooltip
},

请参阅下面我的回答，其中对此进行了更详细的讨论：

jQuery 验证 showErrors 块 highlight/unhighlight

jQuery validation showErrors blocks highlight/unhighlight

jquery

jquery-validate