使用带有css bootstrap的jQuery验证插件，突出显示错误的字段[重复]答案

【问题标题】：using jQuery validation plugin with css bootstrap, is highlighting the wrong fields [duplicate]使用带有css bootstrap的jQuery验证插件，突出显示错误的字段[重复]
【发布时间】：2016-09-09 16:14:50
【问题描述】：

我正在尝试使用JQuery Validation Plugin 进行客户端表单验证。

我使用 css bootstrap 构建我的表单。所以我想使用help-block 类添加has-error 类来突出显示错误。在没有错误的地方，我不想添加任何类。

这是我所做的

$('#myForm').validate({
    errorElement: "em",
    errorPlacement: function (error, element) {
        // Add the `help-block` class to the error element
        error.addClass("help-block");

        if (element.prop("type") === "checkbox") {
            error.insertAfter(element.parent("label"));
        } else {
            error.insertAfter(element);
        }
    },
    highlight: function (element, errorClass, validClass) {
        $(element).parents("div").addClass("has-error");
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).parents("div").removeClass("has-error");
    }
});

上述代码的问题在于，当发生错误时，所有“有效或无效”字段都会变为红色。即使一个字段不是必需的，它仍然会突出显示。

如何避免在有效字段上添加“红色”？

【问题讨论】：

你可以为你的问题创建一个小提琴
您错误地定位了父元素。在这里查看答案：stackoverflow.com/a/18754780/594235

标签： javascript jquery css twitter-bootstrap jquery-validate

【解决方案1】：

不知道你的确切 css 很难说，但我认为这与这里的这一行有关：$(element).parents("div").addClass("has-error");

这一行正在做的是去无效元素，然后去每个 div 父级并添加“has-error”类。

这意味着，如果您的 css 中有类似的内容，则无效输入的父 div 下方的每个输入也将是红色的：

div.has-error input {
    background-color: red;
}

我希望让您的.parents('div') 更具体，因为它的存在方式——它一直沿着作为 div 的父元素链向上移动。在我看来，这太笼统了。

这是我的意思的粗略说明。基本上，无效元素没有得到类，而是它的所有 div 父级。这意味着如果这些 .has-error div 的任何子级将应用错误样式。

【讨论】：