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

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

Answer 2

Вы

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

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

Answer 3

Мы говорим JQuery, чтобы выделить ошибочные поля путем обычно помещая стиль для input элемента, например:

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

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

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

Answer 4

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

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

Дмитрий Кресин, Web development