Jquery驗證多個選項卡，一次驗證一個選項卡？

Question

我是新來的jQuery，我試圖使用它和驗證插件（http://docs.jquery.com/Plugins/Validation）來創建一個包含多個選項卡的不同部分的多部分表單。現在我有它有多個選項卡，並且「下一步」按鈕切換到下一個選項卡。

我遇到的問題是，當我最後在最後一頁上提交時，表單驗證正確，但如果在其他頁面上有錯誤，用戶不會收到通知，並且驗證實際上只發生一次「提交」被點擊。

當我點擊「下一步」時，我將如何驗證每個單獨的？我真的不想創建多個表單或跟蹤隱藏的字段：S有什麼建議嗎？

謝謝！

<script type="text/javascript"> 
$(document).ready(function() { 
    //....stuff 
    //tabs 
    var tabs = $("#tabs").tabs(); 
    $(".nexttab").click(function() { 
     //var selected = $("#tabs").tabs("option", "selected"); 
     //$("#tabs").tabs("option", "selected", selected + 1); 
     $("#tabs").tabs("select", this.hash); 
    }); 

    //use link to submit form instead of button 
    $("a[id=submit]").click(function(){ 
     $(this).parents("form").submit(); 
    }); 

    //form validation 
    var validator = $("#myForm").validate();  
}); 
</script> 

<form class="cmxform" id="myForm" method="post" action=""> 
    <div id="tabs"> 
     <ul> 
      <li><a href="#general">General</a></li> 
      <li><a href="#tab2"></a></li> 
     </ul> 

     <div id="general"> 
      ....stuff... 
      <p> 
       <a class="nexttab navbutton" href="#tab2"><span>Next</span></a> 
      </p> 
     </div> 
     <div id="tab2"> 
      <h2>Tab2</h2> 
      <p> 
       <a class="nexttab navbutton" href="#general"><span>Prev</span></a> 
       <a class="submit navbutton" id="submit" href="#"><span>Submit</span></a> 
      </p> 
     </div> 
    </div> 
</form> 

編輯：

@Andrew：

我做你的第二個示例和禁用標籤的某種組合。似乎工作，除了刷新頁面重新禁用標籤。

var tabs = $("#tabs").tabs({ 

    disabled: [1,2,3,4,5], 

    select: function(event, ui) { 
     var valid = true; 
     var current = $(this).tabs("option", "selected"); 
     var panelId = $("#tabs ul a").eq(current).attr("href"); 

     if(ui.index > current) 
     { 
      $(panelId).find("input").each(function() { 
       //console.log(valid); 

       if (!validator.element(this) && valid) { 
        valid = false; 
       } 
      }); 

     } 

     return valid; 
    } 

}); 

在結合：

$(".nexttab").click(function() { 
    var selected = $("#tabs").tabs("option", "selected"); 
    $("#tabs").tabs("enable", selected+1); 
    $("#tabs").tabs("option", "selected", selected + 1); 
}); 

Answer 1

這是可能的使用的validator的.element(selector)功能。你要做的是遍歷活動選項卡上的每個元素，並在輸入中調用該函數。這將依次觸發每個元素的驗證，並顯示驗證消息。

$(".nexttab").click(function() { 
    var valid = true; 
    var i = 0; 
    var $inputs = $(this).closest("div").find("input"); 

    $inputs.each(function() { 
     if (!validator.element(this) && valid) { 
      valid = false; 
     } 
    }); 

    if (valid) { 
     $("#tabs").tabs("select", this.hash); 
    } 
}); 

此外，你可能會想，當用戶點擊一個選項卡進入到一個新的組輸入，而不是單擊「下一步」即可運行類似的代碼。

這裏有一個工作示例：http://jsfiddle.net/c2y6r/

更新：這裏的另一種方式，你可以做到這一點，取消在無效的表單元素select事件：

var validator = $("#myForm").validate(); 
var tabs = $("#tabs").tabs({ 
    select: function(event, ui) { 
     var valid = true; 
     var current = $(this).tabs("option", "selected"); 
     var panelId = $("#tabs ul a").eq(current).attr("href"); 

     $(panelId).find("input").each(function() { 
      console.log(valid); 
      if (!validator.element(this) && valid) { 
       valid = false; 
      } 
     }); 

     return valid; 
    } 
}); 

但是，現在你必須考慮讓用戶在輸入無效數據後返回當前頁面。另一方面，如果用戶點擊一個標籤或下一個鏈接，您將獲得將所有驗證代碼保存在一個函數中的優勢。

例子：http://jsfiddle.net/c2y6r/1/

更新2，如果你想要讓人們通過選項卡界面向後導航：

var tabs = $("#tabs").tabs({ 
    select: function(event, ui) { 
     var valid = true; 
     var current = $(this).tabs("option", "selected"); 
     var panelId = $("#tabs ul a").eq(current).attr("href"); 

     if (ui.index > current) { 

      $(panelId).find("input").each(function() { 
       console.log(valid); 
       if (!validator.element(this) && valid) { 
        valid = false; 
       } 
      }); 
     } 

     return valid; 
    } 
}); 

Answer 2

現有的代碼並沒有爲我工作（也許它過時）所以我想出了以下內容。這個例子假設使用jquery選項卡和jQuery驗證器。

$('#tabs').tabs(
{ 
    beforeActivate: function(event, ui) 
    { 
     var valid = $("#myForm").valid(); 
     if (!valid) { 
      validator.focusInvalid(); 
      return false; 
     } 
     else 
      return true; 
    } 
});