使用jQuery驗證的日期驗證

Question

我想使用jquery驗證來驗證日期。包括Javascript庫是：

<script type="text/javascript" src="<?php echo base_url()?>asset/jqueryui/ui/ui.core.js"></script> 
     <script type="text/javascript" src="<?php echo base_url()?>asset/jqueryui/ui/ui.datepicker.js"></script> 
     <script src="<?php echo base_url()?>asset/jquery/jquery.metadata.js" type="text/javascript"></script> 
     <script src="<?php echo base_url()?>asset/jqvalidate/jquery.validate.js" type="text/javascript"></script> 

假設我有3個輸入字段。鳥的名稱，地址和日期，我使用errorContainer來顯示錯誤。

我的JavaScript是：

   <script type="text/javascript"> 
       $().ready(function() { 

        var errorContainer = $('div.errorContainer'); 
        // validate the form when it is submitted 
        var validator = $("#frm").validate({ 
         errorContainer: errorContainer, 
         errorLabelContainer: $("ol", errorContainer), 
         wrapper: 'li', 
         meta: "validate", 
         rules: { 
          datepicker: { 
           required: true, 
           date: true 
          } 
          } 
        }); 
       }); 

       $(function(){ 
        $("#datepicker").datepicker(); 
       }); 
       </script> 

<form id="frm"> 
<input type="text" id="name" name="name" class="field text {validate:{required:true}}"> 
<input type="text" id="address" name="address" class="field text {validate:{required:true}}"> 
<input type="text" id="datepicker" name="datepicker"> 
<input type="submit"> 
</form> 

，但它不日期驗證工作。

我需要你的幫助。謝謝

Answer 1

得到它

<input type="text" id="datepicker" name="datepicker" class="{validate:{required:true, date:true}}"> 

Answer 2

我假設你使用this jQuery validate。如果您在jquery.validate.js文件或包含的示例中看到，有幾個內置規則date。您可以閱讀http://docs.jquery.com/Plugins/Validation/Methods/date中的文檔。

如果您的輸入具有不同的日期格式，或者您想確保日期是實際日期，那麼您可以構建自己的規則。在zip文件裏面，有additional-methods.js文件。你可以從中學習，然後創建你自己的規則。

Answer 3

添加類date你的日期元素和嘗試。它應該工作。 jQuery驗證插件適用於附加到元素的css類。

Answer 4

這是一個古老的線程，但我認爲這個noob可能會幫助任何其他來的人。 我能夠自定義驗證方法來確定日期是否準確。不想得再添庫，所以我用純JavaScript和jQuery去：

2008年2月29日=好

2007年2月29日=壞

這裏是本質的代碼：

$("#submit").click(function() { 
    var form = $("#validationtest"); 
    form.validate(); 
    if (form.valid() == false) 
    { alert("Initial Data Incomplete"); } 
    else 
    { alert("Good data!"); } 
}); 

$.validator.addMethod("AccurateDate", function(value) { 
    var checkdate = $("#dob").val(); 
    var rawmonth = checkdate.substr(0,2); 
    var rawday = checkdate.substr(3,2); 
    var rawyear = checkdate.substr(6,4); 
    var checkdate = new Date($("#dob").val()); 
    return ((rawmonth == checkdate.getMonth()+1) && 
     (rawday == checkdate.getDate()) && 
     (rawyear == checkdate.getFullYear()) 
     ); 
                 }, "Not a real date"); 
$.validator.classRuleSettings.AccurateDate = {AccurateDate: true}; 

$("form").validate({ 
     debug: true, //change to false when going into production 
     rules: { 
       name: {required: true, 
        minlength: 2 }, 
       address: { required: true }, 
       dob: {required: true, 
        AccurateDate: true}, 
       zipcode: { required: true, 
          digits: true, 
          minlength: 5 } 
       }, 
    messages: { 
       name: { required: " Name required", 
         minlength: " Name must be 2 characters" }, 
       address: { required: " Address required" }, 
       dob: { required: " Date of Birth Required" }, 
       zipcode: { required: " Zipcode required", 
         digits: " Only numbers accepted", 
         minlength: " Five numbers are required." } 
       }  
}); 

它只是指向四個輸入元素。 再一次，我感謝這個網站上的每個人都幫助過去 - 希望這可以幫助別人。

PS - 我試圖把這個放在jsfiddle上，但不斷得到一個類似「使用POST」的錯誤代碼，並找不到原因。它在我的測試網站上正常工作。

PSS - 我只是maskedinput.js跑了，不得不到checkdate.substr調整到0,3 4,2 7,4和 - 不知道爲什麼......