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

可以重构该函数以消除如此多的循环，但它会产生所需的效果。只有不按顺序排列的日期字段才会被标记为无效。

使用jQuery Validate插件验证顺序日期列表

1 个答案: