jQuery验证元素背景颜色的更改

默认情况下，jQuery.validate似乎不会更改无效元素的背景色。是否也可以更改

select

元素的背景色？我的大多数元素都是

input type=“text”

，但我需要一个用于选择表单元素的指示符。我不使用默认生成的消息，因为它们不适合我的布局

以下代码确实更改了

输入

元素的背景色，但它永远不会恢复到以前的样式：

$('form[name="register"]').validate({ errorClass: 'jqInvalid', rules: { fnameCreate: "required", //input monthCreate: "required", //select emailCreate: { required: true, email: true }, //input passwordCreate: "required", //input type=password }, messages: { fnameCreate: "", monthCreate: "", emailCreate: "", passwordCreate: "", }, errorPlacement: function (error, element) { element.css('background', '#ffdddd'); } });

---

无效元素得到一个类

error

，或者在您的情况下，

jqInvalid

，因为您已经设置了

errorClass

选项，只需在样式表中按照您的需要设置该类的样式，例如：

.jqInvalid { background: #ffdddd; }

如果需要，可以覆盖错误消息的详细信息（默认元素为

）：

label.jqInvalid { background: none; }

---

这种CSS方法负责删除…因为类一旦有效就会被删除。如果您希望将绿色背景应用于有效元素等，还有一个

success

类。

这是一个特殊性问题

.error

和

.jqInvalid

都不如

.field.txt

因此，增加特定性需要将CSS更改为

.field input.error

，它的权重大于

.field.txt

，因此顺序不再重要

---

请参阅，以获取有关特定性的信息

我删除了errorClass和errorPlacement选项，并注意到元素中添加了

.error

类。但是，我的CSS没有覆盖。在Firebug中，CSS在那里（在活动CSS的下面），但它被划掉了。@David-一定有其他样式具有覆盖它的相同属性…更具体的东西，什么规则真正起作用，使用为

.error

类划掉的相同属性？这是一个类规则

.field.txt

，其中

.field

是一个环绕框的div，直接应用

.txt

。我原以为如果class属性是

class=“txt jqInvalid”

，则会同时应用.txt和.jqInvalid（或error）样式？我在Firebug提到的那一行之前和之后各试了一行。不管怎样，它都会被覆盖。@David-你有示例页面吗？我可以快速看一下……您的覆盖样式要么稍后声明，要么更具体（总是赢）。

.jqInvalid { background: #ffdddd; }

label.jqInvalid { background: none; }