Question

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

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

Answer 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

找到

Answer 2

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

使用errorClass参数添加.invalid类：

input.error {
    color: red;
}

Answer 3

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

.error-label {
    color: red;
}

Answer 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

Answer 5

只需在您的 css 中创建一个样式即可。
当 validate() 函数检测到错误时，实际上会创建一个 "label" 来显示带有类名 "error" 的错误，因此只需在您的类中为此类提供样式样式表，如：

label.error{color:#f00;}
或
.error{color:#f00;}

而已..

Jquery验证：如何使字段变红

5 个答案: