Monday, March 26, 2012

ConfirmButtonExtender and Validation

I am using theConfirmButtonExtender on a button that has CauseValidation=true.

The button's confirmation alert pops-up even when the page is (not) valid, so the user sees it every time they do not fill out a control properly and submit.

Am I missing a setting or was this extender written regarless of validation controls and page validaty?

Alternatives?

Hi Jjmonty,

My understanding of your issue is that you want to show the ConfirmButtonExtender based on the page validation. If I have misunderstood, please feel free to let me know.

It is a design pattern rather than your code problem. To achieve what you want , we can set the ConfirmButtonExtender's TargetControl to a hidden Button. When we click on the fake Button , it will call a javascript function. The javascript function will first validate the inputs them fire to show the ConfirmButtonExtender . Here is the test sample.

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator> <ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server" ConfirmText="Are you sure to submit?"TargetControlID="Button1"> </ajaxToolkit:ConfirmButtonExtender> <div style="display:none"> <asp:Button ID="Button1" runat="server" Text="Button" /> </div><input id="btnFake" type="button" value="Submit" onclick="toSubmitForm()" /> <script language="javascript"> function toSubmitForm(){if(typeof(Page_ClientValidate)=='function'){ if(Page_ClientValidate()) { $get("<%=Button1.ClientID%>").click(); } } } </script> </form></body></html>

Best regards,

Jonathan

No comments:

Post a Comment