jQuery Подтвердить Требуется Выбрать

Question

Я пытаюсь проверить html-элемент select с помощью плагина jQuery Validate. Я установил для «требуемого» правила значение true, но оно всегда проходит проверку, поскольку по умолчанию выбирается нулевой индекс. Есть ли способ определить пустое значение, которое используется обязательным правилом?

UPD. Пример. Представьте, что у нас есть следующий элемент управления HTML:

<select>
  <option value="default">Choose...</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

Я хочу, чтобы плагин валидации использовал значение по умолчанию как пустое.

Answer 1

Более простое решение было изложено здесь: Подтвердить выбор поля

Сделать значение пустым и добавить обязательный атрибут

<select id="select" class="required">
<option value="">Choose an option</option> 
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>

Answer 2

Вы можете написать собственное правило!

 // add the rule here
 $.validator.addMethod("valueNotEquals", function(value, element, arg){
  return arg !== value;
 }, "Value must not equal arg.");

 // configure your validation
 $("form").validate({
  rules: {
   SelectName: { valueNotEquals: "default" }
  },
  messages: {
   SelectName: { valueNotEquals: "Please select an item!" }
  }  
 });

Answer 3

самое простое решение

просто установите значение первой опции в пустую строку value=""

<option value="">Choose...</option>

и проверка запроса required правило will work

Answer 4

использовать минимальное правило

установить значение первой опции на 0

'selectName':{min:1}

Answer 5

Вам нужно только указать validate[required] в качестве класса этого выбора, а затем поставить параметр со значением = ""

например:

<select class="validate[required]">
  <option value="">Choose...</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

Answer 6

Я не знаю, каким был плагин, когда задавался вопрос (2010), но сегодня я столкнулся с той же проблемой и решил ее следующим образом:

1. Дайте вашему тегу выбора атрибут имени. Например, в этом случае

   <select name="myselect">

2. Вместо того, чтобы работать с атрибутом value = "default" в параметре тега, отключите параметр по умолчанию или установите значение = "" в соответствии с предложением Andrew Coats

   <option disabled="disabled">Choose...</option>

   или

   <option value="">Choose...</option>

3. Установить правило проверки плагина

   $( "#YOUR_FORM_ID" ).validate({ rules: { myselect: { required: true } } });

   или

   <select name="myselect" class="required">

Obs: решение Эндрю Коутса работает, только если у вас есть только один выбор в вашей форме. Если вы хотите, чтобы его решение работало более чем с одним выбором, добавьте атрибут name к вашему выбору.

Надеюсь, это поможет! :)

Answer 7

Вот простой и понятный пример:

   <select class="design" id="sel" name="subject">
        <option value="0">- Please Select -</option>
        <option value="1"> Example1 </option>
        <option value="2"> Example2 </option>
        <option value="3"> Example3 </option>
        <option value="4"> Example4 </option>
   </select>

    <label class="error" id="select_error" style="color:#FC2727"><b> Warning : You have to Select One Item.</b></label><td>

    <input type="submit" name="sub" value="Gönder" class="">

JQuery:

jQuery(function() {  

jQuery('.error').hide(); // Hide Warning Label. 

jQuery("input[name=sub]").on("click", function() {

   var returnvalue;

   if(jQuery("select[name=subject]").val() == 0) {

        jQuery("label#select_error").show(); // show Warning 
        jQuery("select#sel").focus();  // Focus the select box      
        returnvalue=false;   

}

return returnvalue;

});
      });  // you can change jQuery with $

Answer 8

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>

 <form id="myform"> 
       <select class="form-control" name="user_type">
        <option value="">Select</option>
        <option value="2">1</option>
        <option value="3">2</option>
        </select>
       </form>


<script>
  $('#myform').validate({ // initialize the plugin
            rules: {
          user_type:{ required: true},
         }
      });
</script>

выберите значение будет пустым

Answer 9

Решение, упомянутое @JMP, сработало в моем случае с небольшой модификацией: Я использую element.value вместо value в addmethod.

$.validator.addMethod("valueNotEquals", function(value, element, arg){
    // I use element.value instead value here, value parameter was always null
    return arg != element.value; 
}, "Value must not equal arg.");

// configure your validation
$("form").validate({
    rules: {
        SelectName: { valueNotEquals: "0" }
    },
    messages: {
        SelectName: { valueNotEquals: "Please select an item!" }
    }  
});

Вполне возможно, что у меня есть особый случай, но я не выяснил причину. Но решение @ JMP должно работать в обычных случаях.

Answer 10

       html
        <select class="design" id="sel" name="subject">
                <option >- Please Select -</option>
                <option value="1"> Example1 </option>
                <option value="2"> Example2 </option>
                <option value="3"> Example3 </option>
                <option value="4"> Example4 </option>
           </select>

            <label class="error" id="select_error" style="color:#FC2727"><b> Warning : You have to Select One Item.</b></label><td>

            <input type="submit" name="sub" value="Gönder" class="">
**jQuery**

$(document).ready(function() {  
    if($("#sel").val() == null){
         alert('select a value)
         }
      });