Question

我正在使用jQuery validate plugin。我的错误标签的样式类似于工具提示，并采用多层次的嵌套div来创建。该插件有一个wrapper选项，允许将元素类型指定为错误消息的包装器，但它只包装一次。

是否有人熟悉如何进行嵌套包装？

这不是我的确切标记，但作为一个例子：

<div class="tooltip">
  <div>
    <div>
      <span class="error">This field is required.</span>
    </div>
  </div>
</div>

*更新*

克里斯的回答回答了我原来的问题，但却产生了一个新问题。现在正在根据需要显示错误，但插件无法清除它们。验证失败后，span.error设置为display:none，但仍会显示div.tooltip嵌套包装。

Answer 1

我不知道使用包装器选项创建嵌套包装器的方法，但也许您可以使用showErrors处理程序来实现相同的效果。

基本上你会在插件显示错误后使用旧式的jquery / javascript来包装span元素。我认为如果你已经将它包装在工具提示中，那么诀窍就是弄清楚。也许，你可以通过从跨度中找到一个工具提示类最近的div来做到这一点。

我希望有一个更优雅的解决方案，但我认为这是一个好的开始。如果您发现任何调整以使其更有效，请告诉我。我没有太多时间来玩它。

showErrors: function(errorMap, errorList) {

  var errorListSize = errorList.length;
  this.defaultShowErrors();

  if(errorListSize > 0) {
    $('span.error').each(function() {
      if($(this).closest('div.tooltip').size() == 0) {
        $(this).wrap('<div class="tooltip"></div>').wrap('<div></div>').wrap('<div></div>');
      }
    });
  }
},

这是生成的html。

<div class="tooltip">
  <div>
    <div>
      <span class="error">This field is required.</span>
    </div>
  </div>
</div>

Answer 2

我有同样的问题，但由于我无法在验证插件中修复它，我在css中完成了它。虽然我看不到工具提示框的样子，但这可能是您的解决方案。

我所做的是将工具提示框的高度设置为0.所以当没有任何内容时，您将无法看到它。

我给错误类提供了工具提示的高度。所以当错误被添加到工具提示时，工具提示会显示。当错误元素从工具提示中删除时，它将不再显示，因为它不再继承高度，因为内部的错误元素已经消失。

也许这个解决方案也适合你。

Answer 3

我最终做的（它的工作原理）是将自定义unhighlight事件添加到插件的unhighlight函数中：

unhighlight: function(element, errorClass, validClass ) {
    $(element).removeClass(errorClass).addClass(validClass);
    $(element).trigger("unhighlight");
}

在我的代码中，我将事件侦听器附加到表单字段，删除与字段本身位于同一父容器中的任何错误工具提示。

Answer 4

你做得很好。另一种选择是让您的标签存在并隐藏。验证插件将查找具有class =“error”的标签，并且for =“该元素需要将其标记为无效”，并且如果找到则显示它而不是创建新标签。当然，如果你想在同一个代码中显示工具提示，你需要在高亮和不亮的情况下完成这个工作。

使用嵌套的错误包装器和jQuery验证插件

4 个答案: