Show validation message depending on each other

Question

I have a following code in aspx page:

                <TABLE id="tblGeneratedTo" cellspacing="0" cellpadding="0" width="100%" align="left" border="0" runat="server">
                    <TR>
                        <td width="20%" align="left"><FONT face="Verdana" size="2"><strong>To:</strong></FONT>&nbsp;</TD>
                        <td width="80%">
                            <asp:textbox id="txtGeneratedTo" runat="server" CssClass="ptinput" MaxLength="10" Width="90px"></asp:textbox>
                            <A onclick="window.open('../calPopUp.aspx?textbox=txtGeneratedTo','cal','width=230,height=190,left=400,top=200')"
                                href="javascript:;"> <IMG src="../images/SmallCalendar.gif" border="0"></A> <FONT class="fontbody">
                                (mm/dd/yyyy)</FONT>
                        </TD>               
                    </TR>
                    <tr>
                        <td colspan="2" align="right">
                            <asp:RegularExpressionValidator ID="Regularexpressionvalidator4" runat="server" CssClass="fontbody"
                                Display="Dynamic" ErrorMessage="*Date should be in (mm/dd/yyyy) format." 
                                ValidationExpression="^([\d]{1,2}/[\d]{1,2}/[\d]{4})$"
                                ControlToValidate="txtGeneratedTo"></asp:RegularExpressionValidator>
                            <asp:CompareValidator ID="CompareValidator6" runat="server" CssClass="fontbody" 
                                Display="Dynamic" ErrorMessage="'End' date cannot fall before 'Start' date."
                                ControlToValidate="txtGeneratedTo" Type="Date" Operator="GreaterThanEqual" 
                                ControlToCompare="txtGeneratedFrom"></asp:CompareValidator>
                        </td>
                    </tr>
                </TABLE>

To:  (mm/dd/yyyy)
Here I have a textbox and two validation controls on it viz. regular expression and compare on actual page when I put some garbage value in textbox I see both the message at a time:

I want to see only one message at a time. Most preferably show comparevalidator message iff regularexpression validator is satisfied or else show only regularexpression validator.

How to achieve this? It will be easy if we can do something for this from MarkUp only rather than codebehind.

Answer 1

For this you have to use CustomValidator. The Validator

<asp:CustomValidator ID="CompareDateValidator" runat="server" 
        ClientValidationFunction="CompareDateValidatorClient"
        ErrorMessage="Some error message" />

The ClientValidationFunction that accompanies this

function CompareDateValidatorClient(sender, args) {
    var fromValue = document.getElementById('<%=txtGeneratedFrom.ClientID%>').value;
    var toValue = document.getElementById('<%=txtGeneratedTo.ClientID%>').value;
    var isValid = false;
    if (ValidateDate(fromValue)) {
        if (ValidateDate(toValue)) {
            if (Date.parse(toValue) > Date.parse(fromValue)) {
                isValid = true;
            }
            else
                sender.innerHTML = "'End' date cannot fall before 'Start' date.";
        }
        else
            sender.innerHTML = "To date should be in (mm/dd/yyyy) format.";
    }
    else
        sender.innerHTML = "From date should be in (mm/dd/yyyy) format.";
    args.IsValid = isValid;
}

function ValidateDate(str) {

    var rm_date = /^(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)\d\d$/;
    //triple check for not empty, mm/dd/yyyy format and whether the date is valid
    return (str.trim() !== "" && str.match(rm_date) && !isNaN(Date.parse(str)));
}

//remedial javascript. trim function
if (!String.prototype.trim) {
    String.prototype.trim = function () {
        return this.replace(/^\s*(\S*(?:\s+\S+)*)\s*$/, "$1");
    };
}

// ControlToValidate property supports hooking up single element. 
//The below hack hooks both txtGeneratedFrom and txtGeneratedTo to the validator
var validatorObj = document.getElementById("<%= CompareDateValidator.ClientID %>");
ValidatorHookupControlID("<%= txtGeneratedFrom.ClientID %>", validatorObj);
ValidatorHookupControlID("<%= txtGeneratedTo.ClientID %>", validatorObj);