jQuery.validate doesn't seem to change the background color of the invalid element by default. Is it also possible to change the background color of a select
element? Most of my elements are input type="text"
, but I need an indicator for the select form elements. I am not using the default generated messages, as they don't fit my layout.
The following code does change the background color of the input
elements, but it never reverts to its previous style:
$('form[name="register"]').validate({ errorClass: 'jqInvalid', rules: { fnameCreate: "required", //input monthCreate: "required", //select emailCreate: { required: true, email: true }, //input passwordCreate: "required", //input type=password }, messages: { fnameCreate: "", monthCreate: "", emailCreate: "", passwordCreate: "", }, errorPlacement: function (error, element) { element.css('background', '#ffdddd'); } });
Edit (sample)
<div class="field">
<div class="labelName_fb">
<label for="email">Email</label>
</div>
<div class="divforText3">
<div class="divLeft"></div>
<div class="textbox-image3">
<input class="txt required" id="emailCreate" name="emailCreate" value="" maxlength="100" type="text" style='width:180px'>
</div>
<div class="divright"></div>
</div>
</div>
Where the input
element is given the jqInvalid
error class on error.
CSS
/* line 3 */ .error { background: #ffdddd; } /* I have since removed the errorClass option */
/* line 254 */ .field .txt {background:transparent none repeat scroll 0 0;border:medium none;color:#000;font-size:11px;width:130px; margin:5px 0;}
The invalid elements get a class of error
by default, or in your case jqInvalid
since you've set the errorClass
option, just style that class like you want in the stylesheet, for example:
.jqInvalid { background: #ffdddd; }
You can override the specifics for the error messages (the default element being <label>
) if you want:
label.jqInvalid { background: none; }
This CSS approach takes care of the removal...since the class is removed once it's valid. There's also a success
class if you want a green background applied to valid elements, etc.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With