2013-02-12 55 views
0

我的表單上有3個datepickers(startdate,enddate和duedate),並且挑選的日期將打印在它們各自的altfields中。我有日期驗證規則設置來驗證altfields中的值,而不是日期選擇器本身(我試着在datepickers上進行驗證,但它什麼也沒做)。帶altfields的jQuery UI日期選擇器:驗證時不應觸發

唯一的規則是它們是必需的,並且enddate和duedate必須大於startdate。

如果我選擇等於startdate的endate或duedate,直到我單擊提交按鈕或者如果我將焦點放到altfield然後單擊(失去焦點),我纔會得到預期的任何驗證錯誤。

當在日期選擇器中選擇日期時,是否有辦法手動驗證這些輸入?

這裏是demo

這裏是代碼:

HTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">  
<head> 
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> 
    <title>Goals</title> 
    <link rel="stylesheet" type="text/css" href="../style/jquery-ui-1.9.2.custom.min.css" 
    /> 
    <script src="../include/jquery.validate.min.js" type="text/javascript"></script> 
    <style type="text/css"> 
     * { 
      font-family: Verdana; 
      font-size: 96%; 
     } 
     label { 
      width: 10em; 
      float: left; 
     } 
     label.error { 
      float: none; 
      color: red; 
      padding-left: .5em; 
      vertical-align: top; 
     } 
     p { 
      clear: both; 
     } 
     .submit { 
      margin-left: 12em; 
     } 
     em { 
      font-weight: bold; 
      padding-right: 1em; 
      vertical-align: top; 
     } 
     .ui-widget { 
      font-size: 1em; 
     } 
     .ui-slider-horizontal { 
      display: inline-block; 
      width: 30em; 
     } 
     .ui-slider-vertical { 
      display: inline-block; 
      float: left; 
      margin: 0em 2em 1em 0em; 
     } 
    </style> 
    <form id="newusergoal" method="post"> 
     <fieldset> 
      <legend>Add a New Goal</legend> 
      <label for="startdate">Start Date:</label> 
      <br/> 
      <div id="startdateselect"></div> 
      <br/> 
      <br/> 
      <input type="text" name="startdate" id="startdate" readonly="true" /> 
      <br/> 
      <br/> 
      <br/> 
      <label for="enddate">End Date:</label> 
      <br/> 
      <div id="enddateselect"></div> 
      <br/> 
      <br/> 
      <input type="text" name="enddate" id="enddate" readonly="true" /> 
      <br/> 
      <br/> 
      <br/> 
      <label for="duedate">Due Date:</label> 
      <br/> 
      <div id="duedateselect"></div> 
      <br/> 
      <br/> 
      <input type="text" name="duedate" id="duedate" readonly="true" /> 
      <br/> 
      <br/> 
      <br/> 
      <input type="submit" name="submit" id="submit" value="Save New Goal" /> 
     </fieldset> 
    </form> 

JS:

$(document).ready(function() { 
$("#newusergoal").validate({ 
    rules: { 
     startdate: { 
      required: true 
     }, 
     enddate: { 
      required: true, 
      greaterThan: "#startdate" 
     }, 
     duedate: { 
      required: true, 
      greaterThan: "#startdate" 
     } 
    }, 
messages: { 
    startdate: { 
     required: "Goal must have a start date" 
    }, 
    enddate: { 
     required: "Goal must have an end date", 
     greaterThan: "End date must be greater than the start date" 
    }, 
    duedate: { 
     required: "Goal must have an due date", 
     greaterThan: "Due date must be greater than the start date" 
    } 
} 
}); 

$("#startdateselect").datepicker({ 
    minDate: 0, 
    maxDate: "10Y", 
    dateFormat: "yy-mm-dd", 
    hideIfNoPrevNext: true, 
    showButtonPanel: true, 
    changeMonth: true, 
    changeYear: true, 
    altField: "#startdate" 
}); 
$("#enddateselect").datepicker({ 
    minDate: 0, 
    maxDate: "10Y", 
    dateFormat: "yy-mm-dd", 
    hideIfNoPrevNext: true, 
    showButtonPanel: true, 
    changeMonth: true, 
    changeYear: true, 
    altField: "#enddate" 
}); 
$("#duedateselect").datepicker({ 
    minDate: 0, 
    maxDate: "10Y", 
    dateFormat: "yy-mm-dd", 
    hideIfNoPrevNext: true, 
    showButtonPanel: true, 
    changeMonth: true, 
    changeYear: true, 
    altField: "#duedate" 
}); 

jQuery.validator.addMethod(
    "greaterThan", 

function (value, element, params) { 
    if (!/Invalid|NaN/.test(new Date(value))) { 
     return new Date(value) > new Date($(params).val()); 
    } 

    return isNaN(value) && isNaN($(params).val()) || (Number(value) > Number($(params).val())); 
}, 
    'Must be greater than {0}.'); 

}); 
+0

請將您的代碼降低到顯示問題所需的最低限度,並構建一個jsFiddle演示。 「手動」驗證是什麼意思? – Sparky 2013-02-12 15:13:24

+0

jsfiddle演示正在進行中,請等待。 – 2013-02-12 15:28:17

+0

請檢查你的jsFiddle是如何構建的。您不會將''部分放入HTML窗格中,而僅放入'body'內容。外部文件包含在左側面板中,並將CSS插入到CSS窗格中。 – Sparky 2013-02-12 16:01:13

回答

3

報價OP:「是有辦法手動驗證這些輸入......?「

使用.element()以編程方式觸發對單個元素的驗證測試。

$("#myform").validate().element("#myfield"); 

http://docs.jquery.com/Plugins/Validation/Validator/element#element

演示http://jsfiddle.net/vMNsy/

本演示展示瞭如何.element()用來觸發對DOM ready事件的第一現場驗證試驗。你可以用你自己的自定義事件或函數來調用它。

看到這個答案更具體的東西...

https://stackoverflow.com/a/4635640/594235

$("#myfield").datepicker({ 
    onClose: function() { 
     $("myform").validate().element("#myfield"); 
    } 
}); 

編輯:按照意見,onClose事件並不適用於OP,但在離開的代碼在地方利益別人的。

+1

在datepicker關閉調用元素()關閉http://stackoverflow.com/questions/4634118/jquery-datepicker-and-custom-validation/4635640#4635640 – 2013-02-12 16:42:04

+0

謝謝@politus。將此添加到答案中。 – Sparky 2013-02-12 16:45:15

+0

@Sparky - 感謝您的耐心回覆。你的解決方案有效另一種解決方案(onClose)不適用於我的情況,因爲我正在顯示內聯日曆(在div上調用而不是輸入)。 – 2013-02-12 18:36:20