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

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>

我需要的是找到 first 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;
    });     
}