My jquery validate error message doesn't show in red, is my error missing built in styling?

Question

I'm using jquery validate to validate 3 attributes (minlength, maxlength, required) in the element.

<input id="jumbotronSearch" type="text" class="form-control input-lg" placeholder="Location" required maxlength="50" minlength="4"/> 

But when the error message is displayed it displays it in black, not red.

From seeing other threads and sites that demo and display validation error messages it seems like the message should be in red and the border of the element will be red too!?? Do I have to style this myself or am I missing some file or a configuration parameter for jquery validate to ge tit to show in red?

Here is what the error message looks like, see the message is black, not red and the border of the element isn't red!

Answer 1

... it seems like the message should be in red and the border of the element will be red too!?? Do I have to style this myself...

Yes, since the plugin does not include a CSS stylesheet, you have to style this yourself.

By default, this plugin applies a class called error to the invalid element and its message label, and a class called valid to the validated element.

DEMO: jsfiddle.net/06cLoL8c/

A quick glance at the official website and you can see there are no CSS files included:

jqueryvalidation.org

From seeing other threads and sites that demo and display validation error messages it seems like the message should be in red...

These other people are likely using frameworks such as Bootstrap, which may include CSS that already targets .error and .valid classes. Otherwise, you can use the validClass and errorClass options to rename these classes into anything you wish.

Here is the same demo as above, but with ridiculous styling applied in the CSS:

jsfiddle.net/y06ur48o/

You should read the documentation for all available plugin options: jqueryvalidation.org/validate/