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.

How can we handle it using jQuery?
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

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>

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.

来源：https://stackoverflow.com/questions/13565718/hide-redundant-error-message-in-asp-net-validationsummary

标签

jquery

ASP.NET

validation-controls