c# - Required field Validation 和 Modal popup 同时发生

Question

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

<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>

我只想在填写所有必填字段后才显示 PopUp，但它显示在它之前。如何更改它。

Answer 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 事件绑定(bind)到新脚本。

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

顺便说一句，OnClick="Send_Click" 事件因 ModalPopupExtender 的 TargetControlID 的行为而变浅，因此我将其删除。