errorClass in JQuery Validator is making my input fieds larger than normal. How to fix?

Question

Greetings, I love working with the validator plugin, but I am just learning it and still trying to learn how to manipulate parts of it to my needs. Very cool, though. It works great on some forms for which I've used it, but I have a bug on this one form.

When I test the form, by not completing a required field, the form input text box in error becomes wider than it is normally on my form. It is like it goes from size="20" to size="25". I've tried using my own css to force the font-size on the errors, but I cannot seemt to force the input boxes to remain the same size. The page in question has strict width restrictions and this problem is breaking the template rules.

I've tried the following css with different sizes: .error { color: #b31b1b; font-size: 13px; } 12px and the input box gets smaller, 13px it gets larger I tried it using em;s also.

Anyone have any ideas on how I can force the input boxes to remain the same size?

thanks, JC--

Answer 1

Just set fixed width of your inputs using CSS, so i.e.:

#myForm input { width:200px; }

Answer 2

Is there a more specific CSS selector overriding your .error class? For example, do you have something like input.error defined anywhere?

Answer 3

I thank you all for reading this and your input. I finally realized that we have a .error class in our main css file that was conflicting with the .error in the jquery plugin css. I used the default settings in the validate plugin (see below) to change "error" to "js-error". Then I created another css file to style the .js-error and include it in my script.

// change .error to .js-error $(document).ready(function(){ jQuery.validator.setDefaults({ errorClass: "js-error" });

---

// jquery-validate-plugin.css

label.js-error { font-weight: bold; color: #b31b1b; } .js-error { color: #b31b1b; }

---

Our main css had this for .error

.error { font-weight: bold; color: #b31b1b; font-family: arial, verdana, sans-seriff; }

I believe it was our font-weight and font-family styles that were causing the form text boxes to become wider.