使用jss验证插件和css bootstrap，突出显示错误的字段

Question

我正在尝试使用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");
    }
});

上述代码的问题在于，当发生错误时，所有字段都有效或无效＆＃34;将变成红色。即使不需要一个字段，它仍然会突出显示。

如何避免添加＆＃34; red＆＃34;有效字段上的颜色？

Answer 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 divs的任何子节点都将应用错误样式。