Question

我有一个表单分为三个选项卡，并使用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，其中包含无效字段并显示此字段。假设#One和#Three div'字段有效且div #Three可见。我想要的是在按下提交按钮后显示#Two。

谢谢！

Answer 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;
    });     
}

Answer 2

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

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

不太优雅但有效。

jQuery的。找到包含无效字段的第一个div的函数

2 个答案: