jQuery select box validation

Question

У меня есть следующий код в jQuery.
Мне нужно отобразить валидационное сообщение «Year Required», когда значение параметра select элемента равно «0».

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#register").validate({ 
     debug: true, 
     rules: { 
      year: { 
       required: function() { 
        if ($("#year option[value='0']")) { 
         return true; 
        } else { 
         return false; 
        } 
       } 
      } 
     }, 
     messages: { 
      year: "Year Required", 
     }, 
    }); 
}) 
</script> 

Выберите окно

<select name="year" id="year"> 
    <option value="0">Year</option> 
    <option value="1">1919</option> 
    <option value="2">1920</option> 
    <option value="3">1921</option> 
    <option value="4">1922</option> 
</select> 

Answer 1

Поскольку вы не можете установить value="" в ваш первый option, вам нужно создать собственное правило с помощью the built-in addMethod() method.

JQuery:

$(document).ready(function() { 

    $('#myform').validate({ // initialize the plugin 
     rules: { 
      year: { 
       selectcheck: true 
      } 
     } 
    }); 

    jQuery.validator.addMethod('selectcheck', function (value) { 
     return (value != '0'); 
    }, "year required"); 

}); 

HTML:

<select name="year"> 
    <option value="0">Year</option> 
    <option value="1">1955</option> 
    <option value="2">1956</option> 
</select> 

Рабочая Демо: http://jsfiddle.net/tPRNd/

---

Оригинал Ответ: (Только если вы можете установить value="" в пределах первого option)

Чтобы правильно проверить на select элемент с помощью плагина JQuery Validate просто требует, чтобы первая option содержит value="". Поэтому удалите 0 от value="0", и это исправлено.

JQuery:

$(document).ready(function() { 

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

}); 

HTML:

<select name="year"> 
    <option value="">Year</option> 
    <option value="1">1955</option> 
    <option value="2">1956</option> 
</select> 

Демо: http://jsfiddle.net/XGtEr/

Answer 2

упростить все дело немного, исправить некоторые проблемы с запятыми, которые будут взрывать некоторые браузеры:

$(document).ready(function() { 
     $("#register").validate({ 
      debug: true, 
      rules: { 
       year: { 
        required: function() { 
         return ($("#year option:selected").val() == "0"); 
        } 
       } 
      }, 
      messages: { 
       year: "Year Required" 
      } 
     }); 
    }); 

Прыжки в предположении, если ваш выбор не имеет этого атрибута validate="required:true"?

Answer 3

Наносить требуют правила в списке выбора нужно просто вариант с пустым значением

<option value="">Year</option> 

затем просто наклеиванием требуется по себе достаточно

<script> 
    $(function() { 
     $("form").validate(); 
    }); 
</script> 

с форма

<form> 
<select name="year" id="year" class="required"> 
    <option value="">Year</option> 
    <option value="1">1919</option> 
    <option value="2">1920</option> 
    <option value="3">1921</option> 
    <option value="4">1922</option> 
</select> 
<input type="submit" /> 
</form> 

fiddle is here

Answer 4

http://docs.jquery.com/Plugins/Validation/Methods/required

редактировать код для «выбрать», как показано ниже для проверки выбора 0 или нулевое значение из списка выбора

case 'select': 
var options = $("option:selected", element); 
return (options[0].value != 0 && options.length > 0 && options[0].value != '') && (element.type == "select-multiple" || ($.browser.msie && !(options[0].attributes['value'].specified) ? options[0].text : options[0].value).length > 0); 

Answer 5

Jquery Select Box Validation.You может Оповещать сообщение через предупреждение или поместит сообщение в Div в соответствии с вашими требованиями ,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="message"></div> 
 
<form method="post"> 
 
<select name="year" id="year"> 
 
    <option value="0">Year</option> 
 
    <option value="1">1919</option> 
 
    <option value="2">1920</option> 
 
    <option value="3">1921</option> 
 
    <option value="4">1922</option> 
 
</select> 
 
<button id="clickme">Click</button> 
 
</form> 
 
<script> 
 
$("#clickme").click(function(){ 
 

 
if($("#year option:selected").val()=='0'){ 
 

 
alert("Please select one option at least"); 
 

 
    $("#message").html("Select At least one option"); 
 

 
} 
 

 

 
}); 
 

 
</script>