In this article I will explain how to display (show) AJAX Control Toolkit ModalPopupExtender Modal Popup after validation of ASP.Net validators (such as RequiredFieldValidator) is successful in ASP.Net.
 
 
The Problem
When you set any Button’s ID is set as TargetControlID for an AJAX Control Toolkit ModalPopupExtender Modal Popup then such Button will not trigger any ASP.Net Validators (such as RequiredFieldValidators) and hence the validation will not work.
 
 
The Solution
The solution is to make use of a dummy Hidden LinkButton and set its ID as the TargetControlID for the AJAX Control Toolkit ModalPopupExtender Modal Popup.
Finally the validation controls are triggered using Page_ClientValidate JavaScript function and if it returns true then the AJAX Control Toolkit ModalPopupExtender Modal Popup is shown using JavaScript.
Note: You can learn more about showing AJAX Control Toolkit ModalPopupExtender Modal Popup from client side using JavaScript by referring to my article Show/Hide (Open/Close) AJAX Modal Popup using JavaScript in ASP.Net.
 
 
Display (Show) AJAX Modal Popup after validation is successful in ASP.Net
The below HTML Markup consists of an ASP.Net TextBox, a RequiredFieldValidator and a Button. There’s also an ASP.Net AJAX Control Toolkit ModalPopupExtender Modal Popup with TargetControlID set to a Hidden LinkButton (lnkDummy).
The Button has been assigned OnClientClick event handler. Now when the Button is clicked, first the Validation controls (such as RequiredFieldValidators) are validated and if the validation is successful the AJAX Control Toolkit ModalPopupExtender Modal Popup is shown using JavaScript.
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
Name:
<asp:TextBox ID="txtName" runat="server" />
<asp:RequiredFieldValidator ErrorMessage="Required" ControlToValidate="txtName" ForeColor="Red"
    Display="Dynamic" runat="server" />
<br />
<br />
<asp:Button ID="btnDisplayName" runat="server" Text="Display Name" CausesValidation="false"
    OnClientClick="return DisplayName()" />
<asp:LinkButton ID="lnkDummy" runat="server"></asp:LinkButton>
<asp:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="mpe" runat="server"
    PopupControlID="pnlPopup" TargetControlID="lnkDummy" BackgroundCssClass="modalBackground">
</asp:ModalPopupExtender>
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none">
    <div class="header">
        Modal Popup
    </div>
    <div class="body">
        Your name: <span id="lblName"></span>
        <br />
        <asp:Button ID="btnClose" runat="server" Text="Close" OnClientClick="return HideModalPopup()" />
    </div>
</asp:Panel>
 
<script type="text/javascript">
    function DisplayName() {
        if (Page_ClientValidate()) {
            $get("lblName").innerHTML = $get("<%=txtName.ClientID %>").value;
            $find("mpe").show();
        }
        return false;
    }
    function HideModalPopup() {
        $find("mpe").hide();
        return false;
    }
</script>
 
 
Screenshot
Display (Show) AJAX Modal Popup after validation is successful in ASP.Net
 
 
Demo
View Demo
 
 
Downloads
Download Code