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

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>

Contents hide

Answers:

Method 1

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating