Question

Greetings,

I have problem with errorPlacement, I’m trying to place the error message next to the field but it appearing on the top of the page.

any advice how to fix this problem??

here is my code:

<%@ Page Title="" Language="C#" MasterPageFile="~/Master.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="IMAM_APPLICATION.WebForm1" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">


    <script src="js/jquery-1.4.1.js" type="text/javascript"></script>

    <script src="js/jquery.validate.js" type="text/javascript"></script>


    <script type="text/javascript">

        $(document).ready(function() {
            $("#aspnetForm").validate({
                groups: {
                    username: "fname lname",
                    address: "address1 phone"
                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "fname"
|| element.attr("name") == "lname")
                        error.insertAfter("#lastname");
                    else
                        error.insertAfter(element);
                },
                debug: true
            })
        });

    </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">

    <p style="height: 313px">


              <label style="position:absolute; top: 227px; left: 22px;">Your Name</label>
&nbsp;<input name="fname" value="Pete"
                  style="position:absolute; top: 226px; left: 102px;"/>
<input name="lname" id="lastname"
                  style="position:absolute; top: 264px; left: 95px;"/>
<input name="address1" style="position:absolute; top: 347px; left: 102px;"/>
<input name="phone" id="lastname"
                  style="position:absolute; top: 315px; left: 102px;"/>
<br/>
<input type="submit" value="Submit Name" style="position:absolute; top: 407px; left: 73px;"/>
<input type="submit" value="Submit Address"
                  style="position:absolute; top: 370px; left: 437px;"/>

    </p>




    </asp:Content>

Answer 1

This is because all of your elements are absolutely positioned. You can’t put place an error with something outside the normal flow unless it or it’s container are absolutely positioned as well.

To use errorPlacement like you want, you need to use a different style than position:absolute; top: 315px; left: 102px; on your elements. A absolutely positioned layout, unless necessary, it always going to be messy at best to maintain or insert things into.

To get close in this case you could do something like:

error.css({position:'absolute', top: '226px',left: '182px'})
     .insertAfter("#lastname");

But…I’d change the layout.

Also, you have another element with the same ID, make sure to update this so your IDs are unique:

<input name="phone" id="lastname"