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>