I'm trying to get asp:ValidationSummary to use Bootstrap's alert styles and to include a close button. The styling works, but the close button isn't added.
This is how my .aspx looks like:
<asp:ValidationSummary class="alert alert-danger alert-dismissable"
ID="ValidationSummary1" ShowSummary="true" runat="server"
DisplayMode="BulletList"/>
I've tried to get jQuery to add the button, in $(document).ready, like this:
$('.alert-dismissable').each(function ()
{
$(this).prepend('<button type="button" class="close"
data-dismiss="alert">×</button>');
});
This works just fine if I use a regular div element, but not with asp:ValidationSummary. If I examine the markup on the client, the button isn't rendered there.
I've also tried subclassing asp:ValidationSummary to insert the markup in Render (HtmlTextWriter writer). But the result is the same as with the previous attempts.
I've also tried to enclose the ValidationSummary inside a div, like this:
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
<asp:ValidationSummary
ID="ValidationSummary1" ShowSummary="true" runat="server"
DisplayMode="BulletList"/>
</div>
Which seems to render fine in the browser, but closing with the button prevents the ValidationSummary from showing up again as its parent div is now invisible.
The ValidationSummary control enables you to display a list of all the validation errors in a page in one location. This control is particularly useful when working with large forms. If a user enters the wrong value for a form field located toward the end of the page, then the user might never see the error message.
The ValidationSummary class is used to summarize the error messages from all validators on a Web page in a single location. You can summarize the error messages from a group of validators on a Web page by assigning the ValidationSummary control to a validation group by setting the ValidationGroup property.
I think you are on the right track with this
<div id="validationSummary" class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
<asp:ValidationSummary
ID="ValidationSummary1" ShowSummary="true" runat="server"
DisplayMode="BulletList"/>
</div>
Additionally you need to handle the button click that causes validation to reset the visibility and then also clear the html from the validation summary.
$( "#myform" ).submit(function( event ) {
//clear the validation summary html
$("#ValidationSummary1").empty(); //this should be the ClientID not the serverID of your validation control.
//display the validation summary div
$("#validationSummary").toggle();
//you might want to remove the 'hidden' class instead of toggling the divs visibility
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With