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

发布于 2024-12-09 07:23:29 字数 1617 浏览 0 评论 0原文

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

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

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

原文

I have a page where there are some text box with required fields and I have a submit button in the same page for which I have the Modal Pop up. When I click the submit button without filling the text box, the pop up is displayed and the error message is also displayed near the text box.

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

I want to display the PopUp only after all the required fields are filled, but it displays before it. How to change it.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

九歌凝 2024-12-16 07:23:29

你可以用一些 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 的行为而变浅，因此我将其删除。

You could do this with some javascript.

First remove the TargetControlID="btn_Send" from ModalPopupExtender1

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

Then, Add those scripts at the end of the page.

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

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

Then, bind the the OnClientClick event to the new script.

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

By the way, the OnClick="Send_Click" event was shallowed by the behavior of the ModalPopupExtender's TargetControlID, So I removed it.

回复收藏 0 原文