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.