通过jQuery更新ControlToValidate的值时，导致ASP.NET RangeValidator触发

Question

I have a set of date range controls:

<div id="CustomDateRow" class="row-fluid" runat="server">
    <label class="span2 FieldLabel">
        Start Date:
    </label>
    <asp:TextBox ID="StartDate" CssClass="datepicker span3" runat="server" ClientIDMode="Static"></asp:TextBox>
    <label class="span2 FieldLabel">
        End Date:
    </label>
    <asp:TextBox ID="EndDate" CssClass="datepicker span3" runat="server" ClientIDMode="Static"></asp:TextBox>
</div>

I'm converting those controls to jQuery UI date pickers.

I need to ensure that the user can't select more than 30 days at any given time. Originally I had planned on setting the maxDate of the EndDate when the StartDate is set, but there are two basic problems with that.

1. There's no good DateTime.AddMonths() analogous function in JavaScript.
2. This SO article made me realize that it's really much less user friendly.

So, I figured I'll just use a RangeValidator and validate the number of days between the two dates every time the values change.

So, I have a RangeValidator like this:

<div class="row-fluid">
    <asp:RangeValidator ID="DateRangeValidator" runat="server" ControlToValidate="DateRange"
        ErrorMessage="The date range must be at least one day and not more than thirty."
        EnableClientScript="true" MinimumValue="1" MaximumValue="30" CssClass="errortext span9 offset2"
        Display="Dynamic" />
</div>

And it's validating a basic text input control:

<asp:TextBox ID="DateRange" runat="server" ClientIDMode="Static" />

Which is updated in JavaScript when the dates change:

$('.datepicker').change(function () {
    var nDifference = Math.abs(new Date($('#StartDate').val()) - new Date($('#EndDate').val()));
    var one_day = 1000 * 60 * 60 * 24;
    $('#DateRange').val(Math.round(nDifference / one_day));
});

The Problem

Even though the value does change when I set it via jQuery, the RangeValidator doesn't react. However, if I type the value into the text input and leave it the RangeValidator works as expected.

Do I need to fire some kind of event on the DateRange control to force the RangeValidator to execute?

Answer 1

Well, I ended up doing two pretty simple things to solve this and it all resided in the JavaScript method to calculate the range. Here is the working code.

$('.datepicker').change(function () {
    var nDifference = new Date($('#EndDate').val()) - new Date($('#StartDate').val());
    var one_day = 1000 * 60 * 60 * 24;
    $('#DateRange').val(Math.round(nDifference / one_day));
    Page_ClientValidate(null);
});

Note that I got rid of the Math.abs on the nDifference calculation because I needed the real difference, positive or negative. Finally, note that I added the line Page_ClientValidate(null); , that's what causes the RangeValidator I setup to validate.

Works perfectly!