jQuery的select框validation
我在jQuery中有以下代码。
当select元素的选项值为“0”时，我需要显示一个validation消息“Year Required”。
<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框
<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>
由于在第一个option不能设置value="" ，所以需要使用内置的addMethod()方法创build自己的规则。
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/
原始答案:(只有在第一个option可以设置value="" ）
使用jQuery Validate插件正确validationselect元素只需要第一个option包含value="" 。 所以删除value="0" 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/
要在select列表上放置一个需求规则，您只需要一个空值的选项
<option value="">Year</option>
那么只需要自行申请就足够了
<script> $(function () { $("form").validate(); }); </script>
与forms
<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>
小提琴在这里
http://docs.jquery.com/Plugins/Validation/Methods/required
编辑“select”的代码如下，从select列表中检查0或空值select
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);
Jqueryselect框validation。您可以通过警报提醒消息或把消息放在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>
简化整个事情，用逗号来解决一些会炸掉一些浏览器的问题：
$(document).ready(function () { $("#register").validate({ debug: true, rules: { year: { required: function () { return ($("#year option:selected").val() == "0"); } } }, messages: { year: "Year Required" } }); });
跳到一个假设，如果你的select没有这个属性validate="required:true" ？
