3

我有一个分为三个选项卡的表单，并使用 jQuery 验证插件对其进行验证。用户可以在带有链接的选项卡之间切换。在提交按钮被按下并且验证失败后，错误类被添加到相应的选项卡/容器有错误的链接中。这是用下一个功能制作的：

function treatFormLinks () {
    $('.formTab').each(function(){
        $("#" + this.id + "Link").toggleClass('hasErrors', !$('input, select, textarea', this).valid());
    });     
};
$("#Submit").click(function () {
    $('.FormNavi a').removeClass('hasErrors');
    treatFormLinks();
});

这是 html 示例，只是为了解释它的工作原理：

<a href="#" id="OneLink">Link 1</a>
<a href="#" id="OneLink">Link 2</a>
<a href="#" id="OneLink">Link 3</a>

<form>
    <div class="formTab" id="One">... form fields ...</div>
    <div class="formTab" id="Two">... form fields ...</div>
    <div class="formTab" id="Three">... form fields ...</div>
</form>

我需要的是找到第一个div，其中包含无效字段并显示这个。假设div 的字段是有效的#One并且#Threediv#Three是可见的。我想要的是#Two在按下提交按钮后显示。

谢谢！

4

2 回答 2

1

设置链接后立即显示 div。

function treatFormLinks () {
    var alreadydisplayed = false;
    $('.formTab').each(function(){
        $("#" + this.id + "Link").toggleClass('hasErrors', !$('input, select, textarea', this).valid());
        alreadydisplayed?void(0):$(this).css("display","");//if an invalid tab has already been displayed, do nothing
        alreadydisplayed = true;
    });     
}
于 2012-11-09T08:46:50.353 回答
0

我用下一个扩展了这个功能：

$("#" + this.id).toggleClass('tabHasErrors', !$('input, select, textarea', this).valid());
$(".formTab").hide();
$(".formTab.tabHasErrors:first").show();

不太优雅但有效。

于 2012-11-09T09:23:53.513 回答