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

我建议您为此目的使用隐藏字段，您可以在

上看到解决方案

ModalPopupExtender and Validation Controls

Answer 2

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

首先从TargetControlID="btn_Send"

中删除ModalPopupExtender1

<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的行为浅化，所以我删除了它。

Answer 3

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

CausesValidation="false"

此属性可避免在单击模式弹出峰值/确定按钮时触发所需的字段

必填字段验证和模态弹出窗口同时发生

3 个答案: