jquery.form validate 在 jquery.ui datepicker 完成字段完成之前运行

Question

我在带有两个日期选择器字段的表单上附加了以下 jquery 验证：

$("#submitform").validate(
        {
            debug: true,
            rules: {
                summary: {
                    validateWidthLimits: {max: 49, min: 5}
                },
                description: {
                    validateWidthLimits: {max: 49, min: 5}
                },
                start_date: { //HERE**
                    validateDate: {field: "#end_date", when: "before"}
                },
                end_date: { //HERE**                        
                    validateDate: {field: "#start_date", when: "after"}
                },
                geocomplete: {
                    validateWidthLimits: {max: 500, min: 5}
                }
            },
            submitHandler: function(event, validator) {
                // submitForm();
                return false;
            },
            invalidHandler: function(event, validator) {
                setFeedback2($("#mainfbf"), "All required fields must be filled out", true);
                return false;
            }
    });

当我使用 datepicker 选择一个日期时，例如 start_date，我希望 start_date 检查它是否在 end_date 之前，反之亦然 end_date。

验证函数是：

$.validator.addMethod("validateDate",   function(value, element, param) {
if (!value) {
    message = "*";
} else if (!value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/)) {
    message = "Format dd/mm/yyyy";
}
//default to true
var fieldComparison = true;

//Validate against another date field (before:after)
if (param.field) {
    var compareTo = $(param.field).val();

    var compareToDate = Date.parse(compareTo,"dd/MM/yyyy");
    var valueDate = Date.parse(value, "dd/MM/yyyy");
    var comparisonInt = valueDate.compareTo(compareToDate);//remove line

    if (param.when == "after" && ((compareToDate.compareTo(valueDate)) < 0)) {
        fieldComparison = false;
        message = "Start date before End date";
    } else if (param.when == "before" && ((compareToDate.compareTo(valueDate)) < 0)) {
        fieldComparison = false;
        message = "End date before Start date";
    }
}

if (value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/) && fieldComparison) {
    return true;
} else {
    return feedBackOverride(param);
}

}，消息函数）；

现在逻辑不完整，但是当我从日期选择器中选择一个日期时，它会根据旧值而不是新选择的值进行验证，因此我陷入了困境。

日期选择器代码是：

    $(".datepicker1").datepicker({
        minDate:0,
        dateFormat : 'dd/mm/yy',
        changeMonth : true,
        changeYear : true,
        yearRange : '-0:+10'
    });

关于如何强制验证等到字段实际完成的任何想法？

Answer 1

您可以有一个隐藏字段来为您验证此规则。

hiddenDate: {
            required: function() 
             {
                var MESSAGE = 'VALUES NOT ENTERED';

                //if Start Date and End Date is filled then do date comparison
                //otherwise return false since the fields are not filled.

                if($('#start_DATE').val() && $('#end_DATE').val() )
                {
                  /* Verify start and end dates are correctly formatted */

                  if(isStartDateValid && isEndDateValid)
                  {
                    var selectedStart =  $('#start_DATE').val();
                    var selectedEnd   =  $('#end_DATE').val();

                    if(selectedStart > selectedEnd)
                       MESSAGE = "Start date greater than end date" 
                    else
                       MESSAGE = "Start date smaller than end date" 

                   }

                }

              return MESSAGE ;
             }
            }

我已添加消息，这些消息将是 true/false 值。