必填字段验证和模式弹出出现在同一时间 [英] Required field Validation and Modal popup occurs at the same time

问题描述

我有一个页面，有所需的字段的一些文本框和我有一个在同一个页面，我有模态弹出提交按钮。当我点击提交按钮无填充的文本框，显示弹出，也显示附近的文本框中的错误消息。

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.

推荐答案

您可以用一些JavaScript做到这一点。

You could do this with some javascript.

首先删除的TargetControlID =btn_Send从 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>

然后，绑定了的OnClientClick事件，新的脚本。

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()"  />  

顺便说一句，在的OnClick =Send_Click事件变浅通过行为的ModalPopupExtender的的TargetControlID ，所以我删除它。

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

这篇关于必填字段验证和模式弹出出现在同一时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！