jquery - 将嵌套错误包装器与 jQuery 验证插件一起使用

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>