Jquery Validation: How to make fields red

Question

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".

I also want each field to turn red color. How would i do that? Thanks!

Answer 1

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.

These classes are also applied to the error label, so be aware of that when writing your CSS.

• Demo with default classes: http://jsfiddle.net/wesley_murch/j3ddP/2/

The validation plugin allows 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/

The configuration options can be found at http://docs.jquery.com/Plugins/Validation/validate

Answer 2

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

use the errorClass parameter to add the .invalid class:

input.error {
    color: red;
}