Set jQuery validation message position inside ASP.Net AjaxToolKit ModalPopupExtender

Hi sweetypaul,

You need to set the validationEngine promptPosition.

Check the below example.

HTML

<form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <asp:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btndummy" PopupControlID="ModalPanel" CancelControlID="CancelButton" />
    <asp:Button ID="btndummy" runat="server" Style="display: none" />
    <%-- ******************Panel to Enter/Update Payment details************************--%>
    <asp:Panel ID="ModalPanel" runat="server" Width="600px" Style="background-color: #607D8B; padding: 40px; color: #ffffff; display: none;">
        <table width="100%" style="vertical-align: top" id="tblDetails">
            <tr>
                <td>InvoiceNo</td>
                <td>
                    <asp:TextBox ID="txtInvNo" runat="server" Enabled="false"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>Pending Amount</td>
                <td>
                    <asp:TextBox ID="txtPendingAmt" runat="server" Enabled="False"></asp:TextBox></td>
            </tr>
            <tr>
                <td valign="top">Bank</td>
                <td>
                    <asp:UpdatePanel ID="upBank" runat="server">
                        <ContentTemplate>
                            <asp:DropDownList ID="ddlBank" runat="server" AutoPostBack="True"></asp:DropDownList>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </td>
            </tr>
            <tr>
                <td valign="top">Branch</td>
                <td>
                    <asp:UpdatePanel ID="upBranch" runat="server">
                        <ContentTemplate>
                            <asp:DropDownList ID="ddlBranch" runat="server" AutoPostBack="True"></asp:DropDownList>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </td>
            </tr>
            <tr>
                <td valign="top">Account No</td>
                <td>
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                        <ContentTemplate>
                            <asp:TextBox ID="txtAcNo" runat="server" Enabled="False"></asp:TextBox>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="ddlBranch" />
                        </Triggers>
                    </asp:UpdatePanel>
                </td>
            </tr>
            <tr>
                <td valign="top">Transaction Amount</td>
                <td>
                    <asp:TextBox ID="txtAmount" runat="server" CssClass="validate[required]"></asp:TextBox></td>
            </tr>
            <tr>
                <td valign="top">Transcation No</td>
                <td>
                    <asp:TextBox ID="txtTranNo" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td valign="top">Transaction Date</td>
                <td>
                    <asp:TextBox ID="txtTranDate" runat="server" onclick="showDate();" CssClass="validate[required]"></asp:TextBox>
                    <asp:CalendarExtender ID="CalendarExtender1" runat="server" BehaviorID="Date" TargetControlID="txtTranDate" Format="dd/MMM/yyyy" />
                </td>
            </tr>
            <tr>
                <td valign="top">Cheque No</td>
                <td>
                    <asp:TextBox ID="txtChNo" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>WriteOff Amount
                </td>
                <td>
                    <asp:TextBox ID="txtWriteOff" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td valign="top">Cheque Date
                </td>
                <td>
                    <asp:TextBox ID="txtChDate" runat="server" onclick="showDate1();"></asp:TextBox>
                    <asp:CalendarExtender ID="CalendarExtender2" runat="server" BehaviorID="Date1" TargetControlID="txtChDate" Format="dd-MMM-yyyy"></asp:CalendarExtender>
                </td>
            </tr>
            <tr>
                <td valign="top">Drawer Bank
                </td>
                <td>
                    <asp:UpdatePanel ID="UpDBank" runat="server">
                        <ContentTemplate>
                            <asp:DropDownList ID="ddlDrawerBank" runat="server" AutoPostBack="True"></asp:DropDownList>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </td>
            </tr>
            <tr>
                <td valign="top">Drawer Branch
                </td>
                <td>
                    <asp:TextBox ID="txtDBranch" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td valign="top">TDS
                </td>
                <td>
                    <asp:TextBox ID="txtTDS" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td valign="top">RoundOff
                </td>
                <td>
                    <asp:TextBox ID="txtRoundOff" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td valign="top">Remarks
                </td>
                <td>
                    <asp:TextBox ID="txtRemarks" runat="server" TextMode="MultiLine"></asp:TextBox>

                </td>
            </tr>
        </table>
        <br />
        <asp:Button ID="CancelButton" runat="server" Text="Close" Style="color: #000; float: right; z-index: -12" />
        <asp:Button ID="OKButton" runat="server" Text="Save" Style="color: #000; float: right; z-index: -11" />
    </asp:Panel>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-es.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("[id*=OKButton]").on("click", function () {
                $("#form1").validationEngine('attach', { promptPosition: "topRight:35" });
            });
        });
    </script>
</form>

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.mpe.Show();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Me.mpe.Show()
    End If
End Sub

Screenshot