使用jQuery驗證插件驗證順序日期列表

Question

我正在使用jQuery Validate插件在我的表單上執行驗證。我有一個動態生成的日期列表。它可以包括從o到x數量的日期。我需要驗證此日期列表是否按順序排列，並且列表末尾的任何日期都不在列表中較早出現的日期之前。

我已經研究了addMethod和addClassRules函數來添加這些自定義規則，但是我仍然模糊瞭如何實現這一點，而不會導致整個日期列表無法驗證，如果其中只有一個是無序的。

有沒有人用Validate插件做過這種類型的驗證？

現在，我使用Validate（）方法在javascript中添加規則，而不是向元素添加類。下面是什麼我現在做的一個例子：

$('#SaveForm').validate(
      { 
       focusInvalid: false, 
       errorContainer: errorContainer, 
       errorLabelContainer: $("ol", errorContainer), 
       wrapper: 'li', 
       highlight: function(element) { 
        $(element).addClass('field-validation-error'); 
        $(element).addClass('input-validation-error'); 
       }, 
       unhighlight: function(element) { 
        $(element).removeClass('field-validation-error'); 
        $(element).removeClass('input-validation-error'); 
       }, 
       invalidHandler: function() { 
        $('#notifyBar').showNotifyBar({ 
         notifyText: 'There are errors on the form. Please see the bottom of the page for details', 
         backgroundColor: '#FF0000' 
        }) 
      }, 
      rules: { 
       SystemComment: { 
        maxlength: 8000 
       }, 
       WorkComment: { 
        maxlength: 8000 
       }, 
       DispositionGroup: { 
        required: true 
       }, 
       DispositionCategory: { 
        required: true 
       }, 
       DispositionDetail: { 
        required: true 
       }, 
       NextWorkDate: { 
        required: true, 
        date: true 
       } 
      }, 
      messages: { 
       SystemComment: { 
        maxlength: "System Comment max length is 8000 characters" 
       }, 
       WorkComment: { 
        maxlength: "Work Comment max length is 8000 characters" 
       }, 
       DispositionGroup: { 
        required: "Disposition Group is required" 
       }, 
       DispositionCategory: { 
        required: "Disposition Category is required" 
       }, 
       DispositionDetail: { 
        required: "Disposition Detail is required" 
       }, 
       NextWorkDate: { 
        required: "Next Work Date is required", 
        date: "Next Work Date must be in mm/dd/yyyy format" 
       } 
      } 
     }); 

我將這些方法做了驗證，但它會導致如果只是其中之一發生故障，所有的字段驗證失敗：

jQuery.validator.addMethod("currency", function(value, element) { return this.optional(element) || /^(\d{1,3})(\.\d{1,2})?$/.test(value); } 
, "Payment Amount must be in currency format xx.xx"); 

jQuery.validator.addMethod("paymentDateCheck", validatePaymentDates, "Payment Date(s) must be in sequential order and may not be prior to today"); 
jQuery.validator.addMethod("paymentAmountCheck", validatePaymentAmounts, "Total Payment Amount cannot exceed the Customer Balance"); 

jQuery.validator.addClassRules({ 
    paymentAmountField: { 
     required: true, 
     currency: true, 
     paymentAmountCheck: true 
    }, 
    paymentDateField: { 
     required:true, 
     date:true, 
     paymentDateCheck:true 
    } 
}); 

jQuery.extend(jQuery.validator.messages, { 
    required: "Payment Date and Payment Amount are required", 
    date: "Please specifiy valid date(s)", 
    currency: "Amount must be in currency format (00.00)" 
}); 

Answer 1

好的，我得到了這個工作。這是我比較幼稚的實現：

1.添加自定義的驗證方法：

$.validator.addMethod("paymentDate", function(value, element) { 
    return this.optional(element) || validatePaymentDate(value, element); 
}, "Payment Date(s) is required, must be in date format, and must be in order"); 

2.添加一個階級統治（元素必須包含 「paymentDateField」 類

$.validator.addClassRules({ 
    paymentDateField: { 
     required: true, 
     date: true, 
     paymentDate: true 
    } 
}); 

3.執行validatePaymentDate函數：

function validatePaymentDate(value, element) { 
    var paymentDates = $('.paymentDateField'); 
    var dateArray = new Array(); 
    var arrayIndex = 0; 
    var currentElementIndex = 0; 
    var isValid = true; 

    $(paymentDates).each(function() { 
     var currentElementVal = $(this).val(); 
     dateArray[arrayIndex] = currentElementVal; 

     if (currentElementVal == $(element).val()) { 
      currentElementIndex = arrayIndex; 
      return false; 
     } 

     arrayIndex++; 
    }); 

    for (var x = 0; x <= arrayIndex; x++) { 
     console.log('array val: ' + dateArray[x]); 
     console.log('dateVal: ' + value); 

     if (x > currentElementIndex) { 
      isValid = new Date(dateArray[x]) > new Date(value); 
     } 

     if (x < currentElementIndex) { 
      isValid = new Date(dateArray[x]) < new Date(value); 
     } 
    } 

    return isValid; 
} 

該函數可以重構消除這麼多的循環，但它會產生所需的效果。只有無序的日期字段被標記爲無效。