Jquery Validation: How to make fields red

I am using jquery and jquery.validate.cs (jQu开发者_开发问答ery 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!

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

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

use the errorClass parameter to add the .invalid class:

input.error {
    color: red;
}

use Firebug to see what the class of the error element is and then use css to make it red:

.error-label {
    color: red;
}

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

Just make a style in your css.
when validate() function detects the errors, actually a "label" is created to display the error with class name "error" so just give the style to this class in your style sheet, like:

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

You can highlight your input field border using the below CSS.

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