CODEWITHSUNDEEP
jquerycssjquery-pluginsjquery-validate
David Fox
David Fox

Reputation: 10753

jQuery validate change color of element background

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;}

CSS screenshot in Chrome

Upvotes: 8

Views: 20723

Answers (2)

David Fox
David Fox

Reputation: 10753

This was a specificity problem. .error and .jqInvalid are both less specific than .field .txt

So, increasing the specificity required changing the CSS to .field input.error, which has more weight than .field .txt so the order no longer mattered.

See here for info on specificity

Upvotes: 2

Nick Craver
Nick Craver

Reputation: 630409

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.

Upvotes: 6

Related Questions