jQuery驗證選項卡更改

Question

我正在使用jQuery驗證和製表符插件。我希望在用戶嘗試將標籤移動到其他2個選項卡中的某一個時驗證特定選項卡。有沒有人有這方面的經驗？

目前，這是我怎麼綁定標籤插件：

$("#tabs").tabs({ 
     select: function(event, ui) { 
      // Do your validation here 
     }   
}); 

你可以看看：

$(function() { 
     //Bind Link Tab Selection 
     //------------------ 
     var $tabs = $("#tabs").tabs(); 
     $('#step1_button').click(function() { 
      $tabs.tabs('select','2'); 
      return false; 
     }); 
     $('#step2_button').click(function() { 
      $tabs.tabs('select','3'); 
      return false; 
     }); 
     //------------------ 
     //------------------ 

     //Bind Tabs 
     //------------------ 
     $("#tabs").tabs({ 
      fx: {width:'toggle'} 
     }); 
     //------------------ 
     //------------------ 
    }); 

Answer 1

你可以在每次標籤被改變，像這樣的時間運行的函數官方文檔here。事件是在底部。

因此，您可以在該功能中爲該選項卡中的某些控件執行驗證。此外，您也可以通過使用ui.index來獲取要在功能中選擇的選項卡的索引，而不是手動選擇不同的選項卡。此外，如果使用event.preventDefault()，當前選項卡內容無效，則可以非常容易地防止用戶更改爲其他選項卡。所以總之，像...

$("#tabs").tabs({ 
     select: function(event, ui) { 
      alert('validating tab ' + ui.index); 

      var valid = false; 

      // do your validating here... 
      // determine validity 

      // If the form isn't valid, prevent the tab from changing 
      if(!valid) 
      { 
       // prevent further action 
       event.preventDefault(); 
      } 
      else 
      { 
       // valid so we'll allow user to change tab 
       alert('valid'); 
      } 
     }   
}); 

你可以玩代碼here。