jQuery jQuery验证元素背景的更改颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3791024/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery validate change color of element background
提问by David Fox
jQuery.validate doesn't seem to change the background color of the invalid element by default. Is it also possible to change the background color of a selectelement? Most of my elements are input type="text", but I need an indicator for the select form elements. I am notusing the default generated messages, as they don't fit my layout.
默认情况下，jQuery.validate 似乎不会更改无效元素的背景颜色。是否也可以更改select元素的背景颜色？我的大多数元素都是input type="text"，但我需要一个选择表单元素的指示器。我没有使用默认生成的消息，因为它们不适合我的布局。
The following code doeschange the background color of the inputelements, but it never reverts to its previous style:
下面的代码确实改变了input元素的背景颜色，但它永远不会恢复到以前的样式：
$('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');
}
});
Edit(sample)
编辑（样本）
<div class="field">
<div class="labelName_fb">
<label for="email">Email</label>
</div>
<div class="divforText3">
<div class="divLeft"></div>
<div class="textbox-image3">
<input class="txt required" id="emailCreate" name="emailCreate" value="" maxlength="100" type="text" style='width:180px'>
</div>
<div class="divright"></div>
</div>
</div>
Where the inputelement is given the jqInvaliderror class on error.
当input元素被赋予jqInvalid的错误错误类。
CSS
CSS
/* line 3 */ .error { background: #ffdddd; } /* I have since removed the errorClass option */
/* line 254 */ .field .txt {background:transparent none repeat scroll 0 0;border:medium none;color:#000;font-size:11px;width:130px; margin:5px 0;}
采纳答案by Nick Craver
The invalid elements get a class of errorby default, or in your case jqInvalidsince you've set the errorClassoption, just style that class like you want in the stylesheet, for example:
无效元素error在默认情况下获得一个类，或者在您的情况下，jqInvalid因为您已经设置了该errorClass选项，只需在样式表中按照您想要的方式设置该类的样式，例如：
.jqInvalid { background: #ffdddd; }
You can override the specifics for the error messages (the default element being <label>) if you want:
如果需要，您可以覆盖错误消息的细节（默认元素为<label>）：
label.jqInvalid { background: none; }
This CSS approach takes care of the removal...since the class is removed once it's valid. There's also a successclass if you want a green background applied to valid elements, etc.
这种 CSS 方法负责删除...因为类一旦有效就会被删除。success如果您希望将绿色背景应用于有效元素等，还有一个类。
回答by David Fox
This was a specificity problem. .errorand .jqInvalidare both less specific than .field .txt
这是一个特异性问题。.error并且.jqInvalid都比.field .txt
So, increasing the specificity required changing the CSS to .field input.error, which has more weight than .field .txtso the order no longer mattered.
因此，增加特殊性需要将 CSS 更改为.field input.error，它的权重更大，.field .txt因此顺序不再重要。
See herefor info on specificity
有关特异性的信息，请参见此处
