Validate List of Sequential Dates with jQuery Validate Plugin

Question

I am using the jQuery Validate plugin to perform validation on my form. I have a list of dates which is dynamically generated. It can include from o to x amount of dates. I need to validate that this list of dates is in sequence, and that any date toward the end of the list is not prior to a date that appears earlier in the list.

I have looked into the addMethod and addClassRules functions to add these custom rules, but I'm still fuzzy on how to implement this without causing the entire list of dates to fail validation if only one of them is out of sequence.

Has anyone done this type of validation before with the Validate plugin?

Right now, I am usiong the Validate() method to add rules in javascript rather than adding classes to the elements. Here is an example of what I'm doing now:

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

I was adding these methods to do the validation, but it causes all fields to fail validation if just one of them fails:

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, I got this to work. Here is my rather naive implementation:

1. Add a custom validation method:

$.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. Add a class rule (the element must contain the "paymentDateField" class

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

3. Implement the validatePaymentDate function:

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;
}

The function could be refactored to eliminate so much looping, but it produces the desired effect. Only the date fields which are out of sequence are flagged as invalid.