jQuery 验证 showErrors 块突出显示/取消突出显示

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”类，并且输入边框显示为红色。添加 showErrors 后，此突出显示功能将消失。任何想法为什么？

Answer 1

在我看来，jquery-validation showErrors 阻止了高亮和取消高亮的操作。

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

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

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

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

请参阅下面我的回答，其中更详细地讨论了这一点：

https://*.com/a/28241902/594235