JQuery проверить изменение цвета фона элемента - PullRequest
Новая
       10

JQuery проверить изменение цвета фона элемента

8 голосов
/ 25 сентября 2010

jQuery.validate, похоже, не меняет цвет фона недопустимого элемента по умолчанию. Можно ли также изменить цвет фона элемента select? Большинство моих элементов input type="text", но мне нужен индикатор для выбранных элементов формы. Я не использую сгенерированные по умолчанию сообщения, так как они не соответствуют моему макету.

Следующий код меняет цвет фона элементов input, но никогда не возвращается к своему прежнему стилю: 

 $('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');
        }
    });

Редактировать (образец) 

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

Где элементу input присваивается класс ошибки jqInvalid при ошибке.

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

Ответы [ 2 ]

6 голосов
/ 25 сентября 2010

Недопустимые элементы получают класс error по умолчанию , или в вашем случае jqInvalid, так как вы установили опцию errorClass, просто стилизуйте этот класс так, как вам нужно в таблице стилейНапример: 

.jqInvalid { background: #ffdddd; }

Вы можете переопределить специфику для сообщений об ошибках (элемент по умолчанию <label>), если вы хотите: 

label.jqInvalid { background: none; }

Этот подход CSS заботится оудаление ... так как класс удаляется, как только он действителен.Есть также класс success, если вы хотите, чтобы зеленый фон применялся к допустимым элементам и т. Д.

2 голосов
/ 27 сентября 2010

Это была проблема специфичности..error и .jqInvalid менее специфичны, чем .field .txt

Таким образом, для увеличения специфичности требуется изменить CSS на .field input.error, который имеет больший вес, чем .field .txt, поэтому порядок больше не имеет значения.

См. здесь для получения информации о специфичности

...