Cancel the show event of bootstrap tabs

Question

I am using bootstrap tabs, and I use the shown event to detect the tab change, in a scenario I want to cancel this shown even so I used the preventDefault() function as following :

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var target = $(e.target).attr("href") // activated tab
    if(target === '#mise-en-page' || target === '#widgets'){
        if($('.page-name-input').length > 0){
            var nonEmpty = $('.page-name-input').filter(function(){
                return this.value != '';
            });
            if(nonEmpty.length==0){
                e.preventDefault();
                console.log('Error !!');
            }else{
                console.log('OK');
            }
        }else{
            console.log('OK');
        }
    };
  });

In this case the preventDefault() function didn't work and I still can navigate between tabs even if I had the 'Error !!' message printed on my console.

How can I solve this ?

Edit :

This is a jsfiddle where the preventDefault() doesn't work with the shown event.

http://jsfiddle.net/xFW8t/2426/

Answer 1

shown.bs.tab is fired once the tab has been shown. In order to avoid the default behaviour you should listen to the previous step, try like this:

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
    //your stuff
});

Although I'm not sure if you will be able to prevent the default behaviour for a custom library. PreventDefault is meant to be use for default behaviours of the language not custom ones.