Обязательное поле Проверка и модальное всплывающее окно происходит одновременно

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>

Я хочу отображать всплывающее окно только после того, как все необходимые поля заполнены, но оно отображается перед ним.Как это изменить.

Answer 1

Вы можете сделать это с помощью некоторого 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 2

Я предлагаю вам использовать скрытое поле, для этого вы можете увидеть решение для

ModalPopupExtender и элементов управления проверкой .

Answer 3

У кнопки саммита, которая есть в модальном всплывающем окне, должно быть это свойство

CausesValidation="false"

это свойство позволяет избежать запуска обязательных полей при нажатии на модальную всплывающую кнопку саммита / ок