Проверка JQuery не выделяет мое поле выбора при ошибке

Question

Я пытаюсь применить проверку выпадающего списка (поэтому, если значение равно 0 из <select><option value="0">), тогда применяется желтый цвет фона, как и для остальных полей ввода. Вот мой код:

<script src="jq.js"></script>
<script src="validate.js"></script>
<script>
jQuery.validator.addMethod(
  "selectNone",
  function(value, element) {
    if (element.value == "0")
    {
   element.css({"border" : "1px solid #f00", "background-color" : "#ffffcb"});
      return false;
    }
    else return true;
  },
  "Please select an option."
);

$(document).ready(function(){
 $(".form_validate").validate({
  onfocusout: true,
  rules: {
   zip: {
     required: true,
     number: true
   },
   phone: {
    required: true,
    number: true
   },
   select_debt: {
    required: true,
    selectNone: true
   },
   select_state: {
    required: true,
    selectNone: true
   }
    }

 });
 $("input.required, .select").blur(function() {
  var val = $(this).val();
  if (val == "" || val == "0") {
   $(this).css({"border" : "1px solid #f00", "background-color" : "#ffffcb"});
  } else {
   $(this).css({"border" : "1px solid #ccc", "background-color" : "#fff"});
  }
 });
 function isValidPhoneDigits(val) {
  var intRegex = /^\d+$/;
  var floatRegex = /^((\d+(\.\d *)?)|((\d*\.)?\d+))$/;

  if(intRegex.test(val) || floatRegex.test(val)) {
     return true;
  } else {return false}

  if(intRegex.test(val) || floatRegex.test(val)) {
   return true;
  } else {return false}
 }
 $(".zip").blur(function(){
  if ( isValidPhoneDigits($(this).val()) && $(this).val().length == 5 ) {
   $(this).css({"border" : "1px solid #ccc", "background-color" : "#fff"});
   } else {
   $(this).css({"border" : "1px solid #f00", "background-color" : "#ffffcb"});
   }
 });
 $("a.popup").click(function(){
  var href_link = $(this).attr("href");
  window.open(href_link,"popup", "menubar=no,width=430,height=360,toolbar=no,status=no,directories=no,scrollbars=yes");
  return false;
 });
});
</script>

Я включил jquery и валидацию сверху. Я также объявил новый метод проверки с именем selectNone, который должен проверить, равно ли значение 0, и установить цвет bg на желтый.

Вот мой HTML, если это поможет:

<form class="form_validate">
<table cellpadding="0" cellspacing="0" class="table">
 <tr>
     <td class="al_r">
         First Name
        </td>
        <td>
         <input value="" type="text" name="firstname" class="required" />
        </td>
    </tr>
    <tr>
     <td class="al_r">Last Name</td>
        <td><input value="" type="text" name="lastname" class="required" /></td>
    </tr>
    <tr>
     <td class="al_r">Address</td>
        <td><input value="" type="text" name="address" class="required" /></td>
    </tr>
    <tr>
     <td class="al_r">Zip</td>
        <td><input value="" type="text" id="zip" name="zip" class="required zip" /></td>
    </tr>
    <tr>
     <td class="al_r">City</td>
        <td><input value="" type="text" name="city" class="required" /></td>
    </tr>
    <tr>
     <td class="al_r">State</td>
        <td><select class="required select" name="select_state"><option value="">Select State</option><option value="1">California</option><option value="2">Alabama</option></select></td>
    </tr>
    <tr>
     <td class="al_r">Email</td>
        <td><input value="" type="text" name="email" class="required email" /></td>
    </tr>
    <tr>
     <td class="al_r">Phone</td>
        <td><input value="" type="text" name="phone" class="required" /></td>
    </tr>
    <tr>
     <td class="al_r">Approximate Credit Card Debt</td>
        <td><select class="required select"  name="select_debt">
          <option value="">Please choose debt amount</option>
          <option value="1">$0-$9,999</option>
                <option value="2">$10,000-$19,999</option>
                <option value="2">$20,000-$29,999</option>
                <option value="2">$30,000-$39,999</option>
                <option value="2">$40,000-$49,999</option>
                <option value="2">$50,000+</option>
            </select></td>
    </tr>
    <tr>
     <td colspan="2">
         <input type="image" src="images/check_elig.gif" height="38" width="300" style="border:none; height:38px; margin-left:20px;" />
        </td>
    </tr>
    <tr>
     <td colspan="2" class="al_r small">
         May not be available in your state.
        </td>
    </tr>
</table>
</form>

Заранее благодарен за любую помощь в том, почему он не работает.

Answer 1

Мы просим jQuery выделить поля с ошибками, обычно назначая стиль для элемента input, например:

input.error {
    border: 2px solid #CC0000
}

Убедитесь, что вы также добавили стиль для выбранных элементов, например:

select.error {
    border: 2px solid #CC0000
}

Answer 2

У вас есть

<option value="">Please choose debt amount</option>

Но вы проверяете на value == "0", поэтому вам нужно либо изменить значение <option>, либо логику метода selectNone.

Answer 3

select.error не работает, так как выбор на самом деле скрыт jQuery Mobile. Вместо этого есть упаковочный DIV, который реализует хороший выбор. Благодаря этому мы можем красиво его стилизовать, но, с другой стороны, это порождает эту проблему с ошибками.

Попробуйте это решение Проверка jQuery - добавление класса ошибок в родительский элемент Div . Кажется, работает нормально. Вам нужно будет написать код JS, так как вы, вероятно, захотите использовать проверку jQuery, и класс ошибок НЕ будет назначен для выбора оболочек ...

Дмитрий Кресин, Веб-разработка

Answer 4

Я предполагаю, что это как-то связано с тем фактом, что теги <select> иногда не учитываются валидаторами, поскольку они не попадают под обычные теги <input>. Убедитесь, что vaildator ищет <select> теги для проверки.