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

前端之家收集整理的这篇文章主要介绍了结合使用嵌套的错误包装器和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相关文章