Jquery Validation：如何使字段变红答案

【问题标题】：Jquery Validation: How to make fields redJquery Validation：如何使字段变红
【发布时间】：2011-05-29 16:33:50
【问题描述】：

我正在使用 jquery 和 jquery.validate.cs（jQuery 验证插件 1.8.0）来验证表单。现在它会在一个字段旁边显示一条消息：“这是一个必填字段”。

我还希望每个字段都变成红色。我该怎么做？谢谢！

【问题讨论】：

标签： jquery forms validation

【解决方案1】：

无需任何自定义配置，您就可以这样做：

select.error, textarea.error, input.error {
    color:#FF0000;
}

应用于无效输入的默认类是error
经过验证的输入的默认类是valid。

这些类也适用于错误标签，因此在编写 CSS 时要注意这一点。

带有默认类的演示：http://jsfiddle.net/wesley_murch/j3ddP/2/

validation plugin 允许您配置这些类名，因此您可以这样做：

$("form").validate({
   errorClass: "my-error-class",
   validClass: "my-valid-class"
});

.my-error-class {
    color:#FF0000;  /* red */
}
.my-valid-class {
    color:#00CC00; /* green */
}

带有自定义类的演示：http://jsfiddle.net/wesley_murch/j3ddP/1/

配置选项可以在http://docs.jquery.com/Plugins/Validation/validate找到

【讨论】：

不要使用颜色名称；它已被 w3c 弃用；改为使用#F00
@diEcho：这只是一个演示，但我仍然从未听说过。请问链接？它可能不被推荐，但我非常怀疑它会很快被弃用。
@Wesley;即使在演示中，您也应该更喜欢这里的最佳实践 bcoz，新手只需跟随您 :) 顺便说一句，这里也是您想要查看的链接：w3.org/TR/WCAG10-CSS-TECHS/#style-color-contrast
谢谢，设置 css 错误类效果很好，但现在有一个相关的问题......我如何让所有字段在填写后变回白色并且用户关注其中...现在选择框在选择后变为白色，但输入框不会
@sam：输入不会丢失错误类，直到它们变为有效，你可以在演示中自己看到这一点，尽管我还添加了一个 valid 类（尝试删除它并运行再次小提琴）。你能提供一个展示这种行为的 jsfiddle 或现场演示吗？

【解决方案2】：

$("#myform").validate({
   error: function(label) {
     $(this).addClass("error");
   },
});

使用errorClass参数添加.invalid类：

input.error {
    color: red;
}

【讨论】：

【解决方案3】：

使用Firebug查看错误元素的类是什么，然后使用css将其变为红色：

.error-label {
    color: red;
}

【讨论】：

我认为他/她想让输入 field 变成红色，而不是 label。

【解决方案4】：

我在官方文档中找到了这段代码。在此示例中，我们突出显示了错误的输入及其标签。

$("#myform").validate({
   highlight: function(element, errorClass, validClass) {
    $(element).addClass(errorClass).removeClass(validClass);
    $(element.form).find("label[for=" + element.id + "]")
    .addClass(errorClass);
  },
  unhighlight: function(element, errorClass, validClass) {
    $(element).removeClass(errorClass).addClass(validClass);
    $(element.form).find("label[for=" + element.id + "]")
    .removeClass(errorClass);
  }
});

您可以根据需要轻松修改它。
在此处查看完整文档：https://jqueryvalidation.org/validate/#highlight

【讨论】：

【解决方案5】：

只需在你的 CSS 中创建一个样式。
当 validate() 函数检测到错误时，实际上会创建一个 "label" 来显示类名称为 "error" 的错误，所以只需在您的样式表，例如：

标签.错误{颜色：#f00;}
或
.error{color:#f00;}

而已..

【讨论】：

【解决方案6】：

您可以使用下面的 CSS 突出显示您的输入字段边框。

input.error, textarea.error, select.error  {
    border-color:#f00;
}

【讨论】：