Jquery 验证：如何使字段变红
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6168926/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Validation: How to make fields red
提问by sam
I am using jquery and jquery.validate.cs (jQuery Validation Plugin 1.8.0) to validate a form. Right now it displays a message next to a field saying : "This is a required field".
我正在使用 jquery 和 jquery.validate.cs（jQuery Validation Plugin 1.8.0）来验证表单。现在，它会在字段旁边显示一条消息：“这是必填字段”。
I also want each field to turn red color. How would i do that? Thanks!
我还希望每个字段都变成红色。我该怎么做？谢谢！
回答by Wesley Murch
Without any custom configuration, you can just do this:
没有任何自定义配置，你可以这样做：
select.error, textarea.error, input.error {
color:#FF0000;
}
- The default class that is applied to an invalid input is
error - The default class for an input that was validated is
valid.
- 应用于无效输入的默认类是
error - 已验证输入的默认类是
valid.
These classes are also applied to the error label, so be aware of that when writing your CSS.
这些类也应用于错误标签，因此在编写 CSS 时要注意这一点。
- Demo with default classes: http://jsfiddle.net/wesley_murch/j3ddP/2/
- 带有默认类的演示：http: //jsfiddle.net/wesley_murch/j3ddP/2/
The validation pluginallows you to configure these class names, so you may do something like this:
该验证插件，您可以配置这些类的名字，所以你可以做这样的事情：
$("form").validate({
errorClass: "my-error-class",
validClass: "my-valid-class"
});
.my-error-class {
color:#FF0000; /* red */
}
.my-valid-class {
color:#00CC00; /* green */
}
- Demo with custom classes: http://jsfiddle.net/wesley_murch/j3ddP/1/
- 带有自定义类的演示：http: //jsfiddle.net/wesley_murch/j3ddP/1/
The configuration options can be found at http://docs.jquery.com/Plugins/Validation/validate
回答by Sujit Agarwal
$("#myform").validate({
error: function(label) {
$(this).addClass("error");
},
});
use the errorClass parameter to add the .invalid class:
使用 errorClass 参数添加 .invalid 类：
input.error {
color: red;
}
回答by Krivonosov Egor
I've found this code in official docs. In this example we hightlight both wrong input and its label.
我在官方文档中找到了这段代码。在这个例子中，我们突出显示了错误的输入及其标签。
$("#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);
}
});
You can easily modify it for your needs.
See full documentation here: https://jqueryvalidation.org/validate/#highlight
您可以根据需要轻松修改它。
在此处查看完整文档：https: //jqueryvalidation.org/validate/#highlight
回答by Stevo
use Firebug to see what the class of the error element is and then use css to make it red:
使用 Firebug 查看错误元素的类是什么，然后使用 css 使其变为红色：
.error-label {
color: red;
}
