Replace .Net Validation Summary with jQuery UI dialog
This will replace the older looking .Net Validation Summary built-in JavaScript pop-up with a more modern looking jQuery UI dialog. It works by hiding the real Validation Summary text, then shows it via a dialog by using a wrapper panel.
A new click event (in addition to your original one) is assigned to the submission button. When the button is clicked, if .Net sets the Page_IsValid to false, then the dialog is triggered. Otherwise the page submits like normal.
.Net Code
<asp:Panel ID="panError" runat="server" CssClass="ui-state-error" Style="display: none"> <span class="ui-icon ui-icon-circle-close" style="margin: 0 7px 50px 0; float: left;"> </span><span> <asp:ValidationSummary ID="summaryMain" EnableClientScript="true" ShowMessageBox="false" ShowSummary="true" runat="server" CssClass="ui-state-error-text" style="text-align:left" /> </span> </asp:Panel>
JavaScript (jQuery) Code
<script type="text/javascript"> jQuery(document).ready(function () { $("#<%= this.btnSave.ClientID %>").click(function () { if (!Page_IsValid) { $("#<%= this.panError.ClientID %>").dialog({ resizable: false, width: 420, modal: true, buttons: { 'Close': function () { $(this).dialog('close'); } } }); } }); }); </script>

