jQuery。函數來查找包含無效字段的第一個div

我有一個表單分成三個選項卡並使用jQuery驗證插件進行驗證。用戶可以通過鏈接在標籤之間切換。提交按鈕被按下並且驗證失敗後，錯誤類將被添加到相應標籤/容器出錯的鏈接。這使得與下一個函數：jQuery。函數來查找包含無效字段的第一個div

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>

我需要的是找到第一股利，其中包含無效的字段和顯示這一個。假設#One和#Three div的字段有效，並且div #Three可見。我想要的是按下提交按鈕後顯示#Two。

謝謝！

來源

2012-11-09 Mitya Ustinov

設置鏈接後立即顯示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-09 08:46:50

這實際上有效，但我跳到第一個，而不是第一個*無效*選項卡。 –

我擴展了旁邊的功能：

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

不太優雅，但作品。

來源

2012-11-09 09:23:53

jQuery。函數來查找包含無效字段的第一個div

回答

相關問題