jQuery的问题errorPlacement

Question

问候，

我有问题，errorPlacement，我试图把旁边的字段中显示错误消息，但它出现在页面的顶部。

有什么建议如何解决这个问题？

这里是我的代码：

<%@ 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

这是因为所有的元素都是绝对定位。你不能在正常流程之外放置一个错误，除非它或者它的容器被绝对定位。

要使用errorPlacement就像你想要的那样，你需要在元素上使用不同于position:absolute; top: 315px; left: 102px;的样式。一个绝对定位的布局，除非必要，它总是会凌乱地维护或插入东西。

为了获得在这种情况下，你可以不喜欢接近：

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

但是...我会改变布局。

此外，你必须使用相同ID的另一个要素，一定要更新这让你的ID都是唯一的：

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