I have an ASP.NET/C# application. The user fills out a form with required fields, then clicks a submit button. An AJAX popup message is then displayed, and if they confirm, their information is posted back to the server.

The problem is that the AJAX popup is fired BEFORE the req validator. I need to interrupt this and run the req validator, and then if successful show the popup. I know the req validator is working, because if you cancel the popup message, the req text is shown next to the fields.

Textbox and AJAX control code is here:

<table>
            <tr>
                <td>Name</td>
                <td>
                    <asp:TextBox ID="txtName" runat="server" CssClass="textBox" AutoPostBack="true"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="reqName" runat="server" Text="*" ControlToValidate="txtName" ValidationGroup="trade" ForeColor="White"></asp:RequiredFieldValidator>
                </td>
            </tr> 
            <tr>
                <td>Address</td>
                <td>
                    <asp:TextBox ID="txtAdd1" runat="server" CssClass="textBox"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" Text="*" ControlToValidate="txtAdd1" ValidationGroup="trade" ForeColor="White"></asp:RequiredFieldValidator>
                </td>
            </tr>               
            <tr>
                <td></td>
                <td>                                                                   
                    <asp:Button ID="btnSubmitEnquiry" runat="server" CssClass="buttonText" Text="Submit Enquiry" ValidationGroup="trade" />                                                                                                                                                                                                                          
                </td>
            </tr>
        </table>

        <ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server" okcontrolid="lnkCancel" targetcontrolid="btnSubmitEnquiry" popupcontrolid="pnlConfirm" 
            popupdraghandlecontrolid="PopupHeader" drag="true" ></ajax:ModalPopupExtender>

        <asp:Button Text="targetbutton" ID="btnConfTgt" runat="server" Style="display: none" />

        <asp:Panel ID="pnlConfirm" style="display:none" runat="server">
            <div class="PopupContainer">
                <div class="PopupBody">
                    <br /> 
                    <div align="center">                                              
                        <asp:label ID="Label1" runat="server" CssClass="lblConfirmpopup">
                            Message goes here
                        </asp:label>
                    </div>
                    <br /><br /><br />
                    <div align="center">
                        <asp:LinkButton ID="lnkCancel" runat="server" visible="true" Text="Cancel" CommandName="Update" BorderColor="#FFFFFF" BackColor="#000000" 
                            BorderWidth="3" BorderStyle="Double" ForeColor="White" Font-Size="13pt" Font-Underline="False"></asp:LinkButton> 
                        <asp:LinkButton ID="lnkConfirm" runat="server" visible="true" Text="Submit Enquiry" CommandName="Update" BorderColor="#FFFFFF" BackColor="#000000" 
                            BorderWidth="3" BorderStyle="Double" ForeColor="White" Font-Size="13pt" Font-Underline="False" OnClick="btnSubmitEnquiry_Click"></asp:LinkButton>
                    </div>
                </div>
            </div>
        </asp:Panel>

I've tried coding the first submit button to call the client-side req validator method, but no joy; it still shows the popup before the req validator.

If there's no simple solution, I was thinking of perhaps an 'outside the box' solution, maybe hiding the initial Submit button after the req validation has passed, then showing an additional button with the popup control attached to it. Not sure how I'd be able to achieve this though.

Thanks