Validation Summary in jQuery Dialog Modal Popup Box not working with ASP.Net AJAX UpdatePanel

Last Reply on Dec 01, 2015 03:00 AM By Shashikant

Posted on Dec 01, 2015 02:50 AM

Hello,

I'm using the ASP.Net Validation controls and I want to display the Validation Summary in a JQuery Dialog instead of the native javascript alert messagebox. I've found this solution (aspsnippets) by overriding the clientside WebForm_OnSubmit() function:

    <script type="text/javascript">
        function WebForm_OnSubmit() {
            if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) {
                $("#validation_dialog").dialog({
                    title: "Validation Error!",
                    modal: true,
                    resizable: false,
                    buttons: {
                        Close: function () {
                            $(this).dialog('close');
                        }
                    }
                });
                return false;
            }
            return true;
        }
    </script>

The WebForm_OnSubmit() function is being rendered by the BaseValidator control and in the form tag te following attribute is being added: onsubmit="javascript:return WebForm_OnSubmit();

I am running into a problem on a page which has an UpdatePanel. The input field with the validator (1 to make it simple) is in a Panel within an UpdatePanel. The Panel is set to Visible=False at the first Page Load. There's a button inside the UpdatePanel which makes the Panel with the Validator Visible. When this happens, the WebForm_OnSubmit() function and the onsubmit="javascript:return WebForm_OnSubmit(); attribute of the form tag are not being rendered because it's an AJAX callback and the form tag is outside the updatepanel (in a master page), so the validation summary will not be shown in the jquery dialog. Validation is being performed, so the validation summary wil be shown in a div on a page, but the validation is not being called by the WebForm_OnSubmit() function in this case, because it's not being rendered. Here's the markup of the page:

 

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Button ID="btnNew" runat="server" Text="New" />
            <asp:Panel ID="pnlEdit" runat="server">
                <table>
                    <tr>
                        <td>
                            Name:
                        </td>
                        <td>
                            <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="rfvName" runat="server" ControlToValidate="txtName" 
                                ErrorMessage="Please fill in a name">*</asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <asp:Button ID="btnSave" runat="server" Text="Save" />
							<asp:Button ID="btnCancel" runat="server" Text="Cancel" CausesValidation="False" />
                        </td>
                    </tr>
                </table>
                <br />
                <br />

            </asp:Panel>
       </ContentTemplate>
    </asp:UpdatePanel>
    <asp:ValidationSummary ID="ValidationSummary3" runat="server" CssClass="validation_summary"/>

So, when the validators are not visible at the first load and they will be made visible by an AJAX callback, the WebForm_OnSubmit() function and the onsubmit="javascript:return WebForm_OnSubmit(); attribute of the form tag are not being rendered on the pag. Because of that, the WebForm_OnSubmit() function will not be called and the validation summary will not be shown in the JQuery dialog (although it is being shown in a div on the page). How can I get the Validation Summary to be shown in de JQuery dialog in this case? Is there another function that has to be overriden for this case? I know I can use a Full Postback for the New button and then all the stuff needed is being rendered on the page, or I can make the panel not visible by using a style, but I don't prefer that because there are a lot of pages with this situation. One solution is to use a dummy textbox with a dummy validator (with a dummy validationgroup) of which I set the display to none. Then this dummy validator will cause the the WebForm_OnSubmit() function and the onsubmit="javascript:return WebForm_OnSubmit(); attribute of the form tag to be rendered, but I think there must be a nicer solution. Any help would be appreciated. Thanks in advance.

Posted on Dec 01, 2015 03:00 AM

Here I have created sample that will help you out.

HTML

<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/Blitzer/jquery-ui.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        function OnSubmit() {
            if (typeof (OnSubmit) == "function" && Page_ClientValidate() == false) {
                $("#validation_dialog").dialog({
                    title: "Validation Error!",
                    modal: true,
                    resizable: false,
                    buttons: {
                        Close: function () {
                            $(this).dialog('close');
                        }
                    }
                });
                return false;
            }
            return true;
        }
    </script>
    <asp:ScriptManager runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Button ID="btnNew" runat="server" Text="New" CausesValidation="False" />
            <asp:Panel ID="pnlEdit" runat="server">
                <table>
                    <tr>
                        <td>
                            Name:
                        </td>
                        <td>
                            <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="rfvName" runat="server" ControlToValidate="txtName"
                                ErrorMessage="Please fill in a name">*</asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <asp:Button ID="btnSave" runat="server" Text="Save" OnClientClick="OnSubmit()" />
                            <asp:Button ID="btnCancel" runat="server" Text="Cancel" CausesValidation="False" />
                        </td>
                    </tr>
                </table>
                <br />
                <br />
            </asp:Panel>
        </ContentTemplate>
    </asp:UpdatePanel>
    <div id="validation_dialog" style="display: none">
        <asp:ValidationSummary ID="ValidationSummary3" runat="server" CssClass="validation_summary" />
    </div>
</div>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html