Best IT Recipes

Hide redundant error message in ASP.Net ValidationSummary

I have an asp.net page accepting two input values ​​- name and address. Both are required. I used the necessary field validators and validation.

If the user does not enter both values, this is an error message if it fires twice, although the error message is redundant. I need to display only one error message, although there are two errors.

  • How can we handle it with jQuery?
  • How can we handle it with ASP.Net markup?

Note Initially, I thought that the validation control would emit HTML at the time the page loads, so I can use the “view source” and do jQuery on the HTML elements. But this is not so. It is displayed 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>
0
jquery
Nov 26 '12 at 13:21
source share
1 answer

This is a bit hacky, but it will 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();"/>

Lastly, make sure you have ClientIDMode="Static" on ValidationSummary

Explanation
It uses jQuery to remove everything except the first li in the ValidationSummary, which is actually an UnorderedList (like ul ).
I put it in 5ms setTimeout , since we want it to start only after ValidationSummary has finished adding all the elements to ul .
The code will only work if Page_ClientValidate - this is the function that performs the ClientSide check.

+2
Nov 26
source share


More articles:


All Articles