Required field Validation and Modal popup occurs at the same time

Question

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.

Answer 1

I suggest you to use a hiddenfield for that purpose you can see a solution on

ModalPopupExtender and Validation Controls.