Why is this JQuery Validation with callback not working?

I'm pretty new to the jquery validation plugin. Trying to compare date values in two fields and trigger an error if one date is early than another. Here's the markup:

        <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="w开发者_开发知识库idth: 200px" 
             Class="calendarSelectInput dateComparison required" />

Here's the 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."
                }
            }
     });
});

And the callback javascript.

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

...which gets called on the document.ready, but not whenever the values in the fields change. I tried wrapping form.validate in a change event on those fields, but this function still doesn't get called.

What am I doing wrong? Is this even the right approach for what I am trying to do?

It seems you are assigning the compareRxDates() to the required property, which should be a boolean - true or false, telling the plugin if the field should be required or not. You should put your callback in the depends property instead.

Example:

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

From the documentation:

Each rule can be specified as having a depends-property to apply the rule only in certain conditions

UPDATE: (proposing a better, reusable solution, with an example)

You can add your own validation methods, that you can reuse on other fields, like this:

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

The addMethod function recieves 3 parameters. Method name, evaluation function and a message that will be displayed in case it evaluates to false (can be overridden for individual elements). In the example above, I made a validation method that requires that the argument element has a value that should be greater than the current value. This can be easily changed to work with dates.

Heres a jsfiddle with the working example: http://jsfiddle.net/bZzrs/5/

Here is what worked for me:

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."); 

and then...

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