Question

我正在使用jqTransform来设计非常好用的表单。但是，当我添加Bassistance的Validation插件时，验证错误消息显示在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 parent的更高？

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

Answer 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并到达外部世界。

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

Answer 2

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

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

这样，错误出现在每个输入旁边而不是在其中：）

Bassistance验证与jqTransform无法正常工作

2 个答案: