Valider la liste des dates séquentielles avec jQuery Valider le plugin

Question

J'utilise le plugin jQuery Validate pour effectuer une validation sur mon formulaire. J'ai une liste de dates qui est générée dynamiquement. Il peut inclure de o à x quantité de dates. J'ai besoin de valider que cette liste de dates est dans l'ordre, et que n'importe quelle date vers la fin de la liste n'est pas antérieure à une date qui apparaît plus tôt dans la liste. J'ai examiné les fonctions addMethod et addClassRules pour ajouter ces règles personnalisées, mais je suis encore flou sur la façon de l'implémenter sans que la validation de la liste complète de dates échoue si seulement une d'entre elles est hors séquence.

Est-ce que quelqu'un a déjà fait ce type de validation avec le plugin Validate?

À l'heure actuelle, j'utilise la méthode Validate() pour ajouter des règles au javascript plutôt que d'ajouter des classes aux éléments. Voici un exemple de ce que je fais maintenant:

$('#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" 
       } 
      } 
     }); 

J'ajoutais ces méthodes pour faire la validation, mais il provoque tous les champs de validation échoue si un seul d'entre eux échoue:

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

ok, je l'ai eu pour travailler. Voici ma mise en œuvre plutôt naïve:

1. Ajoutez une méthode de validation personnalisée:

$.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. Ajouter une règle de classe (l'élément doit contenir la classe "paymentDateField"

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

3. Implémentez la fonction 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; 
} 

La fonction pourrait être refactorisée pour éliminer autant de boucles, mais elle produit l'effet désiré. Seuls les champs de date hors séquence sont marqués comme non valides.