jQuery的自定義日期驗證只能一次

Question

試圖在定製驗證方法添加到jQuery.validator我所面臨的問題：

$.validator.addMethod("fromDate", function (value, element) { 
    var fromDateTime = moment(value, 'm/dd/yyyy HH:mm'); 
    var toDateTime = moment($("#endDate").val(), 'm/dd/yyyy HH:mm'); 
    if (fromDateTime.isValid() && toDateTime.isValid()) { 
     return toDateTime.diff(fromDateTime) > 0; 
    } 

    return false; 
}, "Start datetime should be less than end datetime"); 

$('#queryingDateForm').on('submit', function (e) { 
    e.preventDefault(); 
    $('#queryingDateForm').validate({ 
     rules: { 
      start: { 
       required: true, 
       fromDate: true 
      } 
     }, 
     submitHandler: function (form) { 
      load(); 
     } 
    }); 
}); 

這行代碼正常工作只有第一次，所以驗證工作只有一次。

return toDateTime.diff(fromDateTime) > 0; 

第二次如此返回第一次返回的值。

HTML：

<form id="queryingDateForm"> 
    <div class="input-group input-daterange"> 
     <input class="form-control dateTimePicker" id="startDate" type="datetime" placeholder="Date Start" name="start" required /> 
     <span class="input-group-addon">@QueryingResources.To</span> 
     <input class="form-control dateTimePicker" id="endDate" type="datetime" placeholder="Date End" name="end" required /> 

     <div class="input-group-btn"> 
     <button type="submit" class="btn btn-success searchQuery" id="searchDateBtn">@QueryingResources.Search</button> 
     </div> 
    </div> 
</form> 

，這是自舉的DateTimePicker如何初始化：

$(".dateTimePicker").datetimepicker({ 
    autoclose: true, 
    format: 'm/dd/yyyy hh:ii' 
}); 

在此先感謝

Answer 1

的.validate()方法僅用於初始化插件。

下面的版本，表單已經在驗證插件甚至被初始化之前提交的過程中。

$('#queryingDateForm').on('submit', function (e) { 
    e.preventDefault(); 
    $('#queryingDateForm').validate({ .... 

• 如何驗證發生提交事件後，已經開始了嗎？

• 驗證如何在沒有插件首次初始化的情況下進行？

你永遠不會把.validate()方法的submit事件（或click事件）處理函數內部。

---

該插件已自動捕獲點擊並阻止提交表單。它只是在DOM ready事件處理程序中的頁面加載中調用...

$(document).ready(function() { 

    $.validator.addMethod("fromDate", function (value, element) { 
     // your function 
     .... 
    }); 

    $('#queryingDateForm').validate({ // initialize the plugin 
     // your options 
     .... 
    }); 

});