asp.net "compare validator" validation

Question

I am trying to validate fromdate & todate textboxes in asp.net using compare validator my script is:

<table><tr><td>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>    

        <asp:Label ID="Label1" runat="server" Text="Fromdate:"> </asp:Label>
    <asp:TextBox ID="fromdatetxt" runat="server" Height="21px" Width="103px" ></asp:TextBox>
    <ajaxToolkit:CalendarExtender ID="fromdatetxt_CalendarExtender" runat="server" 
        Enabled="True" TargetControlID="fromdatetxt">
    </ajaxToolkit:CalendarExtender>

    </td>
           <td>
               <asp:Label ID="Label2" runat="server" Text="Todate:"></asp:Label>
               <asp:TextBox ID="todatetxt" runat="server" Height="21px" Width="105px" ></asp:TextBox>
               <ajaxToolkit:CalendarExtender ID="todatetxt_CalendarExtender" runat="server" 
                   Enabled="True" TargetControlID="todatetxt">
               </ajaxToolkit:CalendarExtender>

    </td>
    <asp:CompareValidator ID="CompareValidatorDate" runat="server" ControlToCompare="todatetxt"
    ControlToValidate="fromdatetxt" Display="None" ErrorMessage="From date cannot be greaterthan To date"
    operator = "LessThanEqual" Type="Date" ValidationGroup="DateValidation"></asp:CompareValidator>


               <td>
                   <asp:Button ID="Button1" runat="server" Text="Submit" onclick="Button1_Click" ValidationGroup="DateValidation" />

                  <asp:ValidationSummary ID="ValidationSummaryDate" ShowMessageBox="true" ShowSummary="False"
                  ValidationGroup="DateValidation" runat="server" /></td></tr></table>


   </asp:Panel>

This is working fine! but I'm getting message box only when click the button. But I want to get message box the moment I clicked date in Todate in calendar control, and the textboxes must get clear. please help me out .

Answer 1

You can solve your problem using "Page_ClientValidate" function of javascript and "OnClientDateSelectionChanged" event of CalendarExtender.

You do not need to change your CompareValidator i.e.

<asp:CompareValidator ID="CompareValidatorDate" runat="server" ControlToCompare="todatetxt"
            ControlToValidate="fromdatetxt" Display="None" ErrorMessage="From date cannot be greater than To date"
            Operator="LessThanEqual" Type="Date" ValidationGroup="DateValidation"></asp:CompareValidator>

You need to add OnClientDateSelectionChanged event to your CalendarExtender as

<ajaxtoolkit:CalendarExtender id="todatetxt_CalendarExtender" runat="server" enabled="True"
                targetcontrolid="todatetxt" OnClientDateSelectionChanged="validate" >

"validate" here is a javascript function. In that function you need to use "Page_ClientValidate" method of javascript as

var validate = function () {
    var isValid = Page_ClientValidate("DateValidation"); //parameter is the validation group
    if (!isValid) {
        $("#<%= todatetxt.ClientID %>").val(''); //jquery to clear the textbox
    }
}

You can modify the "validate" function as per your convenience.

I hope this helped.

Regards,

Samar

Answer 2

add Display="Dynamic" in validator

        <asp:CompareValidator ID="CompareValidatorDate" runat="server" ControlToCompare="todatetxt"
            ControlToValidate="fromdatetxt" Display="Dynamic"  ErrorMessage="From date cannot be greaterthan To date"
            Operator="LessThanEqual" Type="Date" ValidationGroup="DateValidation"></asp:CompareValidator>