Como validar um formulário do lado do cliente usando o JavaScript gerado pelos componentes Validation do ASP.NET

Felizmente esta manhã resolvemos um problema que nos atormentava desde quinta-feira. Queriamos lançar um ModalPopup em um WebForm somente se o formulário fosse preenchido corretamente. No entanto o ModalPopupExtender é lançado sempre que o botão identificado por TargetControlID é pressionado, independentemente da validação dos campos do formulário.

A solução foi criar um outro botão auxiliar em HTML e repassar o evento de clique apenas quando o formulário fosse válido. Para isso usamos a função WebForm_OnSubmit que retorna o status do form, segue um exemplo:

<script type="text/javascript">
function Popup_SeFormValido() {
WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions('', '', true, '', '', false, false));
if (WebForm_OnSubmit()) {
document.getElementById('<%=Button1.ClientID%>').click();
}
}
</script>

<asp:TextBox
ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1"
runat="server" ErrorMessage="RequiredFieldValidator"
ControlToValidate="TextBox1"></asp:RequiredFieldValidator>
<div style="display: none">
<asp:Button
ID="Button1" runat="server" Text="Button"
/></div><br />
<input
id="htmlButton" type="button" value="Button" onclick="Popup_SeFormValido();"
/>
<asp:Panel ID="Panel1" runat="server">
<strong>PopUp</strong>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender
ID="ModalPopupExtender1" runat="server" PopupControlID="Panel1"
TargetControlID="Button1">
</ajaxToolkit:ModalPopupExtender>