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

Question

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

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>

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

Answer 1

无效元素得到类 error by default ，或者在你的情况下 jqInvalid因为你设置了 errorClass选项，只需在样式表中为该类设置样式即可，例如:

.jqInvalid { background: #ffdddd; }

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

label.jqInvalid { background: none; }

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