jQuery Tabs: How to disallow switching to a specific tab?

Question

Hi,

I am using jQuery Tabs.

Some Tabs require user input.

As soon as the user switches to an other tab these input values are validated.

Now here is my question:

How can I prevent showing any other tab as long as these input values are wrong?

$("#tab").bind('tabsselect', function(){

   if ( ... )
   {
       alert ( 'Please fill all required fields before proceeding' );

      /*         
            What code do I have to place here to prevent displaying this tab?
      */

    }   

})

Thank you for your time

Answer 1

All you need to do is return false from the function and it will prevent selecting the tab. See the example on how to prevent tab selection on form validation failure at the jQuery site.

Answer 2

You can disable your tabs with the UI tabs options. Then they are greyed out and not clickable.

$('.selector').tabs('option', 'disabled', [1, 2]);

So you just disable every other tab that is not the selected one. That would mean though, that you will have to validate the form before the user clicks the tab.