0

我正在使用 jqTransform 来设置我的表单样式，效果很好。但是，当我添加 Bassistance 的验证插件时，验证错误消息显示在 jqTransformwrapper div 中（即在文本框内）而不是父元素（输入后）。

所以 DOM 显示了这一点：

<label for="firstname">Firstname</label>
<div class="jqTransformInputWrapper">
   <div class="jqTransformInputInner">
      <div><input class="required jqtranformdone jqTransformInput error" name="firstname" id="firstname">
      <label for="firstname" generated="true" class="error">This field is required.</label>
      </div>
   </div>

而它应该是：

<label for="firstname">Firstname</label>
<div class="jqTransformInputWrapper">
   <div class="jqTransformInputInner">
      <div>
         <input class="required jqtranformdone jqTransformInput error" name="firstname" id="firstname">
      </div>
   </div>
</div>
<label for="firstname" generated="true" class="error">This field is required.</label>
</div>

有什么办法可以让插件插入更高的错误标签 3 父级？

我在 Bassistance 的示例页面上注意到他们使用不同的表单样式插件并且没有这个问题，但我不知道他们是如何做到的。 http://jquery.bassistance.de/validate/demo/themerollered.html

4

2 回答 2

1

在您对 validate 函数的调用中查找此内容：

errorPlacement: function(error, element) {
                    if ( element.is(":text") )
                        error.appendTo( element.parent().parent().parent().parent() );
                    else
                        error.appendTo( element.parent().next() );
                }

注意 .parent() 序列。您可以像这样针对不同的区域。它称为 jquery 选择器。其他选项包括： .children() .next() .prev()

请注意，我已将文本输入指定为原点。通过使用这么多的 parent() 选择器，您可以逃脱 jqtransform 包装 div 并到达外部世界。

使用组合将标签准确放置在您想要的位置！

于 2012-02-10T23:08:24.237 回答
0

作为一种解决方法，我将行 div 设置为相对定位，并将错误消息设置为绝对，以便它相对于 div。

#myForm label.error {
   color:#dd0000;
   position:absolute;
   float:none;
   font-style:italic;
   left:350px;
   top:4px;
}

这样，错误就会出现在每个输入旁边，而不是在其中:)

于 2010-09-02T10:06:22.040 回答