Question

我的验证插件（See this Fiddle）的Ajax errorPlacement出现问题。 ErrorPlacement 与位置：绝对相结合，迫使我的ajax验证响应弹出错误的位置。

如果用户尚未输入任何信息，则错误消息会弹出正确的位置（以红色文本浮动到输入字段的右侧）。但是，如果用户输入了信息，然后将其删除，则ajax警报（“此字段是必需的”）会弹出到下一个字段中错误的位置。要查看问题，请正确键入所有字段，然后删除您的姓名。电子邮件字段中会弹出“此字段是必填项”的消息，但它属于名称字段。

控制验证的js是：

$(document).ready(function() {
        errorPlacement: function(error, element) {
              error.insertAfter( element).position({
                  my:'right top',
                  at:'right top',
                  of:element          
              });
                  error.fadeOut(3000);
         }  
    }); 
});

导致问题的CSS是：

label.error { position:absolute;}

我需要包含这个css，以便我可以在输入字段上浮动错误。请参阅Fiddle以查看问题。谢谢！

Answer 1

按如下方式修改你的CSS：

form p {
    position: relative;   /* This ensures error label is positioned within the p tag */
}
label.error {  
    top: 0; /* This ensures that it lines up with the top of the input */
    right:90px; 
    color: red; 
    position:absolute;
}

即使在IE中测试也是为了确保...

Answer 2

尼克，你错过了这一点（我回答了你的问题previous question）。 jQuery UI有一个Position实用程序。这就是我用来将标签放在你想要的位置。因此，jsFiddle中唯一的“错误”是您没有检查资源下的“jQuery UI”框。我创建了jsfiddle的版本，我删除了右边：90px的东西并检查了jQuery UI框。就是这样。

如果您想要更改标签相对于元素的位置并显示错误，请查看位置实用程序中的offset选项（上面链接）。

Jquery ErrorPlacement与Position：Absolute冲突

2 个答案: