jqueryasp.netvalidation-controls

Hide redundant error message in ASP.Net ValidationSummary

I have a asp.net page accepting two input values – Name and Address. Both of them are required fields. I have used required field validators and validation summary.

When user does not enter both the values the error message if fired two times though the error message is redundant. I need to display only one error message even though there are two errors.

  1. How can we handle it using jQuery?
  2. How can we handle it using ASP.Net markup?

Note: I initially thought that the validation control will be emitting HTML while page load itself so that I can use "view source" and do jQuery on HTML elements. But it is not. It renders only as follows

 <div id="vsumAll" class="validationsummary" style="display:none;"> </div>

Result

enter image description here

ASP.Net Markup

<body>
<form id="form1" runat="server">
<div>
    <table cellpadding="5" cellspacing="5" width="100%">
        <tr>
            <td>
                <table border="0" align="center" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td>
                            Name
                        </td>
                        <td>
                            <asp:TextBox runat="server" ID="txtName"></asp:TextBox>
                            <asp:RequiredFieldValidator runat="server" ID="reqWorkorderFormat" ControlToValidate="txtName"
                                Text="*" ErrorMessage="Fill all values!"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Address
                        </td>
                        <td>
                            <asp:TextBox runat="server" ID="txtAddresss"></asp:TextBox>
                            <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" ControlToValidate="txtAddresss"
                                Text="*" ErrorMessage="Fill all values!"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <asp:Button runat="server" ID="btnSave" Text="Save" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <asp:ValidationSummary runat="server" ID="vsumAll" DisplayMode="BulletList" CssClass="validationsummary" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>
</form>
</body>
Solution

  • This is a little hackish, but it'll work:

    Add the following Javascript function:

    function submitValidate() {
    var isValid = Page_ClientValidate('');

    if (!isValid) {
        setTimeout("$('#vsumAll ul li:not(:first)').remove()", 5);
    }

    return isValid;
}

    In your submit button add this:

    <asp:Button runat="server" ID="btnSave" Text="Save" OnClientClick="submitValidate();"/>

    And finaly, make sure you have ClientIDMode="Static" on your ValidationSummary

    Explanation:
    It uses JQuery to remove all but the first li in the ValidationSummary - which is actually an UnorderedList (e.g. ul).
    I put it in a 5ms setTimeout since we want it to run only after the ValidationSummary finished adding all the items to the ul.
    The code will only run if Page_ClientValidate fails - this is the function that performs the ClientSide validation.