必填字段验证和模态弹出同时发生答案

【问题标题】：Required field Validation and Modal popup occurs at the same time必填字段验证和模态弹出同时发生
【发布时间】：2011-10-12 11:01:54
【问题描述】：

我有一个页面，其中有一些带有必填字段的文本框，并且在我有模态弹出窗口的同一页面中有一个提交按钮。当我在没有填写文本框的情况下单击提交按钮时，会显示弹出窗口，并且在文本框附近也显示错误消息。

<asp:TextBox ID="txt_ExpiresBy"
             class="datePicker" 
             runat="server" />
<asp:RequiredFieldValidator ID="req_ExpiresBy" 
                            ValidationGroup="SM" 
                            runat="server" 
                            ControlToValidate="txt_ExpiresBy" 
                            Text="*ExpiresBy is a required field.">
</asp:RequiredFieldValidator>
<asp:Button ID="btn_Send" 
            runat="server" 
            ValidationGroup="SM" 
            Text="Send" 
            CausesValidation="true" 
            OnClick="Send_Click" />                         
<asp:ModalPopupExtender ID="ModalPopupExtender1" 
                        TargetControlID="btn_Send" 
                        PopupControlID="Pnl_ForgotPass" 
                        runat="server">
</asp:ModalPopupExtender>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Panel ID="Pnl_ForgotPass" runat="server" 
           CssClass="cpHeader">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Button ID="Btn_ViewDash" runat="server" 
                        Text="View DashBoard" />
            <asp:Button ID="Btn_SeeMessages" runat="server" 
                        Text="Messages Page" />
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Panel>

我只想在填写完所有必填字段后才显示弹出窗口，但它会显示在它之前。如何改变它。

【问题讨论】：

标签： c# asp.net ajax ajaxcontroltoolkit modalpopupextender

【解决方案1】：

你可以用一些 javascript 来做到这一点。

首先从ModalPopupExtender1 中删除TargetControlID="btn_Send"

<asp:ModalPopupExtender ID="ModalPopupExtender1" 
                    PopupControlID="Pnl_ForgotPass" 
                    runat="server">

然后，在页面末尾添加这些脚本。

<script type="text/javascript">
  function ShowPopup() {
   $find('ModalPopupExtender1').Show();
  }

  function ValidateAndShowPopup() {
    if (Page_ClientValidate('SM')) {
        ShowPopup();
    }
  }
</script>

然后，将 OnClientClick 事件绑定到新脚本。

<asp:Button ID="btn_Send" 
        runat="server" 
        ValidationGroup="SM" 
        Text="Send" 
        CausesValidation="true" 
        OnClientClick="ValidateAndShowPopup()"  />

顺便说一句，OnClick="Send_Click" 事件被 ModalPopupExtender 的TargetControlID 的行为所削弱，所以我将其删除。

【讨论】：

鉴于模式弹出扩展器的 TargetControlID 现在不能为空，它怎么可能仍然工作

【解决方案2】：

我建议您为此目的使用隐藏字段，您可以在此查看解决方案

ModalPopupExtender and Validation Controls.

【讨论】：

【解决方案3】：

您在模态弹出窗口中的峰会按钮需要具有此属性

CausesValidation="false"

此属性可避免在单击模态弹出峰会/确定按钮时触发必填字段

【讨论】：