jQuery選擇框驗證

Question

我在jQuery中有以下代碼。
當select元素的選項值爲「0」時，我需要顯示驗證消息「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 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

因爲你的第一個option內不能設置value=""，你需要使用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/

---

原來的答案：（只有當你可以在第一option設置value=""）

正確驗證與jQuery驗證插件中select元素只要求第一個option包含value=""。因此請從value="0"中刪除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的選擇框Validation.You可以通過警報警報消息或股利Put消息按您的要求。

<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>