jquery - 结合使用嵌套的错误包装器和jQuery validate插件

我正在使用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嵌套包装器。

最佳答案

我不知道使用wrapper选项创建嵌套包装器的方法，但是也许可以使用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>

关于jquery - 结合使用嵌套的错误包装器和jQuery validate插件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/2415095/