Problem with ClientValidationFunction and CompareValidator

Hello there.
First of all I must say that I am a newbie when it comes to net (C#).

Here is my problem.

In this page aspx:

  1. I can not working the class ClientValidationFunction;
  2. The class CompareValidator working when EndDate is < StartDate and show message in display; but if other click on the class ImageButton the form is validate and not stopping.

Can you help me?

If you have link for similar task, please give it me.
Can you explain any one or any sample code related this.

Your help would be very appreciated.
Thanks in advance for your time and hints.

Cheers.

code-behind:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System;
using System.Text;

public partial class SqlServer_button : System.Web.UI.Page
{
    protected void StartDateValidator_Validate(object sender, ServerValidateEventArgs args)
    {
        if (string.IsNullOrEmpty(StartDate.Text) || string.IsNullOrEmpty(EndDate.Text))
        {
            args.IsValid = false;
        }
    }

    protected void StartDate1Validator_Validate(object sender, ServerValidateEventArgs args)
    {
        if (string.IsNullOrEmpty(StartDate1.Text) || string.IsNullOrEmpty(EndDate1.Text))
        {
            args.IsValid = false;
        }
    }


    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Button1_Click(Object sender, EventArgs e)
    {

    }

    protected void Button2_Click(Object sender, EventArgs e)
    {

    }
}

Page.aspx:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="default.aspx.cs" Inherits="SqlServer_button" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager" EnableScriptGlobalization="true" EnableScriptLocalization="true"
        runat="server">
    </asp:ScriptManager>
    <div>
        <asp:ValidationSummary ID="ValidationSummary1" ShowMessageBox="true" runat="server"
            ShowSummary="false" />

        <asp:TextBox ID="StartDate" runat="server" Width="70" ValidationGroup="Group1"></asp:TextBox>

        <img src="/webapplication1/Images/pop-up-calendar.gif" id="Img1" alt="Date Start"
            onmouseover="this.style.cursor='pointer'" onmouseout="this.style.cursor='default'" />

        <ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="StartDate"
            PopupButtonID="Img1" Format="dd/MM/yyyy" Animated="true">
        </ajaxToolkit:CalendarExtender>

        <asp:TextBox ID="EndDate" runat="server" Width="70" ValidationGroup="Group1"></asp:TextBox>

        <img src="/webapplication1/Images/pop-up-calendar.gif" id="Img2" alt="Date End"
            onmouseover="this.style.cursor='pointer'" onmouseout="this.style.cursor='default'" />

        <ajaxToolkit:CalendarExtender ID="CalendarExtender2" runat="server" TargetControlID="EndDate"
            PopupButtonID="Img2" Format="dd/MM/yyyy" Animated="true">
        </ajaxToolkit:CalendarExtender>

        <asp:CustomValidator ID="StartDateValidator" runat="server" ErrorMessage="StartDate is required."
            OnServerValidate="StartDateValidator_Validate" ClientValidationFunction="InitValidators"
            ValidationGroup="Group1" Display="Dynamic"></asp:CustomValidator>

       <asp:CompareValidator ID="CompareValidator1" runat="server" ErrorMessage="Invalid Date"
            ControlToValidate="EndDate" ControlToCompare="StartDate" Type="Date" Operator="GreaterThanEqual"
            CssClass="redb" SetFocusOnError="false" Display="Dynamic"></asp:CompareValidator>

        <asp:ImageButton ID="Button1" ImageUrl="/webapplication1/Images/confirm.png" runat="server"
            ValidationGroup="Group1" OnClick="Button1_Click" OnClientClick="if(!confirm('Are You sure?')) return false;" />


        <br />
        <br />


        <asp:TextBox ID="StartDate1" runat="server" Width="70" ValidationGroup="Group2"></asp:TextBox>

        <img src="/webapplication1/Images/pop-up-calendar.gif" id="Img3" alt="Data fine"
            onmouseover="this.style.cursor='pointer'" onmouseout="this.style.cursor='default'" />

        <ajaxToolkit:CalendarExtender ID="CalendarExtender3" runat="server" TargetControlID="StartDate1"
            PopupButtonID="Img3" Format="dd/MM/yyyy" Animated="true">
        </ajaxToolkit:CalendarExtender>

        <asp:TextBox ID="EndDate1" runat="server" Width="70" ValidationGroup="Group2"></asp:TextBox>

        <img src="/webapplication1/Images/pop-up-calendar.gif" id="Img4" alt="Data fine"
            onmouseover="this.style.cursor='pointer'" onmouseout="this.style.cursor='default'" />

        <ajaxToolkit:CalendarExtender ID="CalendarExtender4" runat="server" TargetControlID="EndDate1"
            PopupButtonID="Img4" Format="dd/MM/yyyy" Animated="true">
        </ajaxToolkit:CalendarExtender>

        <asp:CustomValidator ID="StartDate1Validator" runat="server" ErrorMessage="StartDate1 is required."
            OnServerValidate="StartDate1Validator_Validate" ClientValidationFunction="InitValidators1"
            ValidationGroup="Group2" Display="Dynamic"></asp:CustomValidator>

        <asp:CompareValidator ID="CompareValidator2" runat="server" ErrorMessage="Invalid Date"
            ControlToValidate="EndDate1" ControlToCompare="StartDate1" Type="Date" Operator="GreaterThanEqual"
            CssClass="redb" SetFocusOnError="false" Display="Dynamic"></asp:CompareValidator>

        <asp:ImageButton ID="Button2" ImageUrl="/webapplication1/Images/confirm.png" runat="server"
            ValidationGroup="Group2" OnClick="Button2_Click" OnClientClick="if(!confirm('Are You sure?')) return false;" />
    </div>
    </form>
    <script type="text/javascript" language="javascript">
        function InitValidators(source, args) {

            var StartDate = document.getElementById('<%=StartDate.ClientID%>');
            var EndDate = document.getElementById('<%=EndDate.ClientID%>')
            var StartDate1 = document.getElementById('<%=StartDate1.ClientID%>');
            var EndDate1 = document.getElementById('<%=EndDate1.ClientID%>')

            if (StartDate.value == '' || EndDate.value == '') {
                args.IsValid = false;
            }
        }

        function InitValidators1(source, args) {
            if (StartDate1.value == '' || EndDate1.value == '') {
                args.IsValid = false;
            }
        }
    </script>
</body>
</html>

You need to set the ValidationGroup of the CompareValidator to Group1

Thanks a lot for help, this problem is fixed… :slight_smile:
I don’t understand because not working the class ClientValidationFunction:frowning:

Are both client side validators not working? Or just InitValidators1?

    <script type="text/javascript" language="javascript">
        function InitValidators(source, args) {

            var StartDate = document.getElementById('<%=StartDate.ClientID%>');
            var EndDate = document.getElementById('<%=EndDate.ClientID%>'); // added semi-colon

            if (StartDate.value == '' || EndDate.value == '') {
                args.IsValid = false;
            }
        }

        function InitValidators1(source, args) {
            var StartDate1 = document.getElementById('<%=StartDate1.ClientID%>'); // added variable
            var EndDate1 = document.getElementById('<%=EndDate1.ClientID%>'); // added variable

            if (StartDate1.value == '' || EndDate1.value == '') {
                args.IsValid = false;
            }
        }
    </script>

Not working all client side validators… InitValidators and InitValidators1 …:confused:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="default.aspx.cs" Inherits="SqlServer_button" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager" EnableScriptGlobalization="true" EnableScriptLocalization="true"
        runat="server">
    </asp:ScriptManager>
    <div>
        <asp:ValidationSummary ID="ValidationSummary1" ShowMessageBox="true" runat="server"
            ShowSummary="false" />

        <asp:TextBox ID="StartDate" runat="server" Width="70" ValidationGroup="Group1"></asp:TextBox>

        <img src="/webapplication1/Images/pop-up-calendar.gif" id="Img1" alt="Date Start"
            onmouseover="this.style.cursor='pointer'" onmouseout="this.style.cursor='default'" />

        <ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="StartDate"
            PopupButtonID="Img1" Format="dd/MM/yyyy" Animated="true">
        </ajaxToolkit:CalendarExtender>

        <asp:TextBox ID="EndDate" runat="server" Width="70" ValidationGroup="Group1"></asp:TextBox>
        <img src="/webapplication1/Images/pop-up-calendar.gif" id="Img2" alt="Date End" onmouseover="this.style.cursor='pointer'"
            onmouseout="this.style.cursor='default'" />

        <ajaxToolkit:CalendarExtender ID="CalendarExtender2" runat="server" TargetControlID="EndDate"
            PopupButtonID="Img2" Format="dd/MM/yyyy" Animated="true">
        </ajaxToolkit:CalendarExtender>

        <asp:CustomValidator ID="StartDateValidator" runat="server" ErrorMessage="StartDate is required."
            ClientValidationFunction="InitValidators" OnServerValidate="StartDateValidator_Validate"
            ValidationGroup="Group1" Display="Dynamic"></asp:CustomValidator>

        <asp:CompareValidator ID="CompareValidator1" runat="server" ErrorMessage="Invalid Date"
            ControlToValidate="EndDate" ControlToCompare="StartDate" Type="Date" Operator="GreaterThanEqual"
            CssClass="redb" SetFocusOnError="false" Display="Dynamic" ValidationGroup="Group1"></asp:CompareValidator>

        <asp:ImageButton ID="Button1" ImageUrl="/webapplication1/Images/confirm.png" runat="server"
            ValidationGroup="Group1" OnClick="Button1_Click" OnClientClick="if(!confirm('Are You sure?')) return false;" />

        <br />
        <br />

        <asp:TextBox ID="StartDate1" runat="server" Width="70" ValidationGroup="Group2"></asp:TextBox>

        <img src="/webapplication1/Images/pop-up-calendar.gif" id="Img3" alt="Data fine"
            onmouseover="this.style.cursor='pointer'" onmouseout="this.style.cursor='default'" />

        <ajaxToolkit:CalendarExtender ID="CalendarExtender3" runat="server" TargetControlID="StartDate1"
            PopupButtonID="Img3" Format="dd/MM/yyyy" Animated="true">

        </ajaxToolkit:CalendarExtender>
        <asp:TextBox ID="EndDate1" runat="server" Width="70" ValidationGroup="Group2"></asp:TextBox>

        <img src="/webapplication1/Images/pop-up-calendar.gif" id="Img4" alt="Data fine"
            onmouseover="this.style.cursor='pointer'" onmouseout="this.style.cursor='default'" />

        <ajaxToolkit:CalendarExtender ID="CalendarExtender4" runat="server" TargetControlID="EndDate1"
            PopupButtonID="Img4" Format="dd/MM/yyyy" Animated="true">
        </ajaxToolkit:CalendarExtender>

        <asp:CustomValidator ID="StartDate1Validator" runat="server" ErrorMessage="StartDate1 is required."
            ClientValidationFunction="InitValidators1" OnServerValidate="StartDate1Validator_Validate"
            ValidationGroup="Group2" Display="Dynamic"></asp:CustomValidator>

        <asp:CompareValidator ID="CompareValidator2" runat="server" ErrorMessage="Invalid Date"
            ControlToValidate="EndDate1" ControlToCompare="StartDate1" Type="Date" Operator="GreaterThanEqual"
            CssClass="redb" SetFocusOnError="false" Display="Dynamic" ValidationGroup="Group2"></asp:CompareValidator>

        <asp:ImageButton ID="Button2" ImageUrl="/webapplication1/Images/confirm.png" runat="server"
            ValidationGroup="Group2" OnClick="Button2_Click" OnClientClick="if(!confirm('Are You sure?')) return false;" />
    </div>
    </form>
    <script type="text/javascript" language="javascript">
        function InitValidators(source, args) {

            var StartDate = document.getElementById('<%=StartDate.ClientID%>');
            var EndDate = document.getElementById('<%=EndDate.ClientID%>'); // added semi-colon

            if (StartDate.value == '' || EndDate.value == '') {
                args.IsValid = false;
            }
        }

        function InitValidators1(source, args) {
            var StartDate1 = document.getElementById('<%=StartDate1.ClientID%>'); // added variable
            var EndDate1 = document.getElementById('<%=EndDate1.ClientID%>'); // added variable

            if (StartDate1.value == '' || EndDate1.value == '') {
                args.IsValid = false;
            }
        }
    </script>
</body>
</html>

With this modification the class ClientValidationFunction correctly responds, it’s possible? :eek:

        <asp:ValidationSummary ID="ValidationSummary1" ShowMessageBox="true" runat="server"
            ShowSummary="false" ValidationGroup="Group1" />

        <asp:ValidationSummary ID="ValidationSummary2" ShowMessageBox="true" runat="server"
            ShowSummary="false" ValidationGroup="Group2" />

Ah, so the validation summary needed the validaitongroup too. Good to know. :slight_smile:

Thanks you very much for your help!!!
I’m really happy for your quickly answer.
Good bye

good answer!
thanks!