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で遊ぶことができます。