我正在使用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>