jQuery验证具有绝对位置的字段的错误定位

Question

我有一个以图像为背景的 div，输入字段的位置已在图像中设置。 结果，在 html 标记中，我将字段的位置设置为绝对位置，以便它们覆盖在图像上。 我遇到的问题是，当使用 jquery validate 插件时，错误消息显示在顶部。我不知道如何在字段右侧显示它。

这是代码片段：

<div id="user" style="display:none; cursor: default"> 

<form name="userForm" id="userForm" method="post" action="" >
    <input type="text" class="required" id="email" name="email" maxlength="50" />
    <input type="text" class="firstname" id="firstname" name="firstname" />
    <input type="button" id="save" name="save" />

 </form> </div>

//和css

div#user {width:500px; height:400px;  background-image: url(/img/user.gif); background-repeat: no-repeat;}
input#email {position: absolute; left: 30px; width:200px; top:214px; height:20px;  background-color:#fff; border:0;}
input#firstname {position: absolute; left: 30px; width:200px; top:250px; height:20px; background-color:#fff; border:0;}

感谢您的宝贵时间 贾斯汀

Answer 1

您可以使用回调errorPlacement() 更改错误出现的位置。

$("#myform").validate({
  errorPlacement: function(error, element) {
     error.appendTo( element.parent("td").next("td") );
   },
   debug:true
 })

Source.