为什么这个带有回调的 JQuery 验证不起作用？

Question

我对 jquery 验证插件还很陌生。尝试比较两个字段中的日期值并在一个日期早于另一个日期时触发错误。这是标记：

        <label>Last prescription fill date:</label>
        <input type="text" ID="InputLastPrescriptionFillDate" 
             style="width: 200px" 
             Class="calendarSelectInput dateComparison required" />
        <br />
        <label>Prescription start date:</label>
        <input type="text" ID="InputPrescriptionStartDate" name="InputPrescriptionStartDate" 
             style="width: 200px" 
             Class="calendarSelectInput dateComparison required" />

这里是 jQuery。

$(document).ready(function() {
     $("form").validate({
            rules: {
                InputPrescriptionStartDate: {
                    required: compareRxDates()
                }
            },
            messages: {
                InputPrescriptionStartDate: {
                    required: "Last prescription fill date should not be after the prescription start date."
                }
            }
     });
});

还有回调 javascript。

function compareRxDates() {
    return new Date($("#InputPrescriptionStartDate").val()) < new Date($("#InputLastPrescriptionFillDate").val());
}

...它会在 document.ready 上调用，但不会在字段中的值更改时调用。我尝试将 form.validate 包装在这些字段的更改事件中，但仍然没有调用此函数。

我做错了什么？对于我正在尝试做的事情，这甚至是正确的方法吗？

Answer 1

您似乎正在将compareRxDates() 分配给required 属性，该属性应该是一个布尔值 - true 或 false，告诉插件是否需要该字段。您应该将回调放在 depends 属性中。

例子：

$("form").validate({
    rules: {
        InputPrescriptionStartDate: {
            depends: function(element) {
                compareRxDates();
            }
        }
    },
// etc

来自文档：

可以将每个规则指定为具有依赖属性以仅在某些条件下应用该规则

更新：（提出一个更好的、可重复使用的解决方案，并举个例子）

您可以添加自己的验证方法，以便在其他字段上重复使用，如下所示：

jQuery.validator.addMethod("shouldBeGreaterThan", function(value, currentElement, argumentElement) {
   return value > $(argumentElement).val();
}, "* This field should be greater than the other");

$("form").validate({
    rules: {
        InputPrescriptionStartDate: {
            shouldBeGreaterThan: $("#InputLastPrescriptionFillDate")
        }
    }
});

addMethod 函数接收 3 个参数。方法名称、评估函数和在评估为 false 时将显示的消息（可以为单个元素覆盖）。在上面的例子中，我做了一个验证方法，要求参数元素的值应该大于当前值。这可以很容易地更改为使用日期。

这是一个带有工作示例的 jsfiddle：http://jsfiddle.net/bZzrs/5/

Answer 2

这对我有用：

jQuery.validator.addMethod("beforeFillDate", function(value, element) {
    var rxDate = new Date(value);
    var lastFillDate = new Date($("#InputLastPrescriptionFillDate").val());
    return rxDate > lastFillDate;
}, "Last prescription fill date should not be after prescription start date."); 

然后……

$("form").validate({ 
     rules: { InputPrescriptionStartDate: { beforeFillDate: true}} 
});