Jquery 验证：如何使字段变红-解网

问：

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

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

jQuery 表单验证

评论

答：

1赞 Stevo 5/30/2011 #1

使用 Firebug 查看 error 元素的类是什么，然后使用 css 将其设置为红色：

.error-label {
    color: red;
}

评论

1赞 David Thomas 5/30/2011

我认为他/她想将输入字段设置为红色，而不是标签。

40赞 Wesley Murch 5/30/2011 #2

在没有任何自定义配置的情况下，您可以执行以下操作：

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

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

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

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

验证插件允许你配置这些类名，所以你可以做这样的事情：

$("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

评论

0赞 xkeshav 5/30/2011

不要使用颜色名称;它已被 W3C 弃用;请改用#F00

2赞 Wesley Murch 5/30/2011

@diEcho：这只是一个演示，但我从未听说过。请链接？可能不推荐它，但我非常怀疑它会很快被弃用。

1赞 xkeshav 5/30/2011

@Wesley;即使在演示中，您也应该更喜欢最佳实践，因为在这里，新手只需跟随您:)顺便说一句，这里是你想要的链接，也看到：w3.org/TR/WCAG10-CSS-TECHS/#style-color-contrast

0赞 sam 5/31/2011

谢谢，设置CSS错误类效果很好，但是现在有一个相关的问题......如何使所有字段在填写时都变回白色，并且用户将焦点从它们中移开......现在，选择框在进行选择后会变成白色，但输入框不会

0赞 Wesley Murch 5/31/2011

@sam：输入在有效之前不会丢失错误类，您可以在演示中亲眼看到这一点，尽管我还添加了一个类（尝试删除它并再次运行小提琴）。你能放一个 jsfiddle 或一个展示这种行为的现场演示吗？valid

10赞 Sujit Agarwal 5/30/2011 #3

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

使用 errorClass 参数添加 .invalid 类：

input.error {
    color: red;
}

1赞 Krivonosov Egor 7/18/2018 #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

0赞 Real Virtual Technologies 5/22/2021 #5

只需在 css 中创建一个样式即可。
当 validate（）函数检测到错误时，实际上会创建一个“标签”来显示类名为“error”的错误，因此只需在样式表中为此类提供样式，例如：label.error{color：

#f00;}
或者
.error{color：#f00;}

就是这样。.

0赞 Soubhagya Kumar Barik 11/20/2021 #6

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

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

上一个：MySQL IF是否等于COALESCE？

下一个：将 doc、docx、pdf 转换为 HTML 使用 PHP linux