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!

There are NO stylesheets included with this plugin. If it's red, it has nothing to do with jQuery Validate. — Sparky
– Sparky, Commented Oct 23, 2016 at 22:14
Check that your validation.js file is above the js file you are using to do the error checking, if this is in a seperate file. I had a similar issue where my js file in question validating a form on a particular page was above the validation.js file and so it threw me off a bit, with other validation error logs being highlighted in red, whilst this one wasn't. I simply moved up the js file doing the error handling below validation.js file and it worked! Hope this helps someone else too. — Abdush Samad Miah
– Abdush Samad Miah, Commented Feb 2, 2018 at 21:22

Sparky · Accepted Answer · 2016-10-23 23:29:48Z

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/

edited Oct 23, 2016 at 23:29

answered Oct 23, 2016 at 22:16

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sparky Over a year ago

@user1186050, I don't know. Why not read the documentation I linked to and match up the classes accordingly?

chuckd Over a year ago

I don't believe the effect I'm seeking (mostly the highlighting of the border with red) comes from bootstrap. I'm pretty sure it comes from some type of validation action.

Sparky Over a year ago

@user1186050, the validation plugin does not come with CSS... it merely adds/removes the error and valid classes. Period. If you believe otherwise, merely inspect the code to confirm the fact.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related