jQuery验证元素背景的变化颜色

时间:2010-09-24 21:10:55

标签: jquery css jquery-plugins jquery-validate

默认情况下,jQuery.validate似乎不会更改无效元素的背景颜色。是否也可以更改select元素的背景颜色?我的大部分元素都是input type="text",但我需要一个指定选择表单元素。我使用默认生成的消息,因为它们不适合我的布局。

以下代码 会更改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');
        }
    });

修改(示例)

<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>

input元素在错误时被赋予jqInvalid错误类。

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;}

CSS screenshot in Chrome

2 个答案:

答案 0 :(得分:6)

无效元素获得error by default类,或者在您的情况jqInvalid中,因为您设置了errorClass选项,只需设置您想要的类在样式表中,例如:

.jqInvalid { background: #ffdddd; }

如果需要,您可以覆盖错误消息的详细信息(默认元素为<label>):

label.jqInvalid { background: none; }

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

答案 1 :(得分:2)

这是一个特殊性问题。 .error.jqInvalid的具体程度低于.field .txt

因此,增加特异性需要将CSS更改为.field input.error,其权重大于.field .txt,因此顺序不再重要。

有关特异性的信息,请参阅here