JQuery 验证器在 Bootstrap 手风琴上取消突出显示

Question

在标准 bootstrap 手风琴上，我有一些标准 bootstrap 输入，我需要由小组验证。因此，如果出现错误，面板标题文本会改变颜色。当该面板内的所有字段都有效时，我还需要将其改回。

我使用的 JS 是：

var validator = $(this).data('validator');
    if (typeof (validator) != "undefined") {
        validator.settings.ignore = [];
        validator.settings.highlight = function (element, errorClass, validClass) {
            var formgroup = $(element).on().closest(".form-group");
            if (typeof (formgroup) !== "undefined") {
                formgroup.addClass("has-error");
                if (!formgroup.hasClass("conditional")) {
                    if (formgroup.is(":hidden")) {
                        formgroup.show();
                    }
                }
            }
            var accordionHead = $(element).on().closest(".panel");
            if (typeof (accordionHead) !== "undefined") {
                accordionHead.addClass("acc-error");
            }
        };
        validator.settings.unhighlight = function (element, errorClass, validClass) {
            $(element).on().closest(".form-group").removeClass("has-error");
        }
        validator.settings.unhighlight = function (element, errorClass, validClass) {
           $(element).on().closest(".panel").removeClass("acc-error");
        }
    }

然而，这一切所做的只是在留下一个无效字段时更改颜色，然后在输入另一个字段时再次将其更改回错误颜色。无论如何我可以解决这个问题吗？我已经尝试将验证从突出显示复制到取消突出显示，但这给了我同样的问题。

Answer 1

您的代码...

var formgroup = $(element).on().closest(".form-group");

jQuery .on() is used for attaching event handlers to elements。根据文档，它不能留空，也不能用作选择任何内容的一部分。 $(element).closest(".form-group") 就足够了。
您已尝试定义 unhighlight 设置两次。第二个实例将覆盖第一个实例。合二为一

您可以摆脱 .on() 并将您需要的所有内容组合到 unhighlight...

的一个实例中

validator.settings.unhighlight = function (element, errorClass, validClass) {
   $(element).closest(".form-group").removeClass("has-error");
   $(element).closest(".panel").removeClass("acc-error");
}

相应地清理其余代码。

if (typeof (validator) != "undefined") { ...

顺便说一句 - 使用 jQuery 时，您无需在选择对象或元素之前检查它是否存在。如果所选项目不存在，jQuery 将简单地忽略它而不会出现任何错误或问题。

JQuery 验证器在 Bootstrap 手风琴上取消突出显示

JQuery Validator unhighlight on Bootstrap Accordion

css

jquery

jquery-validate

twitter-bootstrap