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 fiel

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

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

.error-label {
    color: red;
}

Answer 3

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

use the errorClass parameter to add the .invalid class:

input.error {
    color: red;
}

Answer 4

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