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

【问题标题】：jQuery validate change color of element backgroundjQuery验证元素背景的更改颜色
【发布时间】：2011-04-17 00:03:50
【问题描述】：

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

以下代码确实改变了input元素的背景颜色，但它永远不会恢复到以前的样式：

$('form[name="register"]').validate({ errorClass: 'jqInvalid', 规则：{ fnameCreate: "required", //输入 monthCreate: "required", //选择 emailCreate: { required: true, email: true }, //输入 passwordCreate: "required", //输入类型=密码 }, 消息：{ fnameCreate: "", 月创建：“”，电子邮件创建：“”，密码创建：“”， }, errorPlacement：函数（错误，元素）{ element.css('背景', '#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;}

【问题讨论】：

标签： jquery css jquery-plugins jquery-validate

【解决方案1】：

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

.jqInvalid { background: #ffdddd; }

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

label.jqInvalid { background: none; }

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

【讨论】：

我删除了 errorClass 和 errorPlacement 选项，我注意到 .error 类被添加到元素中。但是，我的 CSS 没有覆盖。在 Firebug 中，CSS 在那里（在活动 CSS 下方），但被划掉了。
@David - 必须有一些其他样式具有相同的属性来覆盖它......更具体的东西，什么规则实际上有效果，相同的属性被划掉你的@ 987654330@上课？
这是一个类规则.field .txt，其中.field 是一个环绕框的div，.txt 是直接应用的。我认为如果 class 属性为 class="txt jqInvalid"?? 将应用 .txt 和 .jqInvalid（或错误）样式
我已经在Firebug提到的一行之前和一行之后尝试过......无论如何它都会被覆盖。
@David - 你有示例页面吗？我可以快速浏览一下...您的首要风格要么稍后声明，要么更具体（总是获胜）。

【解决方案2】：

这是一个特异性问题。 .error 和 .jqInvalid 都没有.field .txt那么具体

因此，增加特异性需要将 CSS 更改为 .field input.error，它比 .field .txt 更重要，因此顺序不再重要。

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

【讨论】：