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.

/

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/xFW8t/2426/

• javascript
• jquery
• twitter-bootstrap

• 1 Did you try the show.bs.tab event instead? – Carol Skelly Commented Feb 14, 2017 at 11:12
• I am not sure if you can use preventDefault with these custom events, and I don’t see the bootstrap docs mention anything about this. If this is not directly possible, then I suppose you could rewrite it to trigger your tabs via a custom click handler in the first place (so no data-toggle on the trigger links), and then inside that click handler decide whether you want to show the tab or not. – C3roe Commented Feb 14, 2017 at 11:18
• @ZimSystem yup, I tried it, you can check the jsfiddle I've attached. – Renaud is Not Bill Gates Commented Feb 14, 2017 at 11:18
• @CBroe I have no idea how to do that, can you please edit the jsfiddle I've attached – Renaud is Not Bill Gates Commented Feb 14, 2017 at 11:35
• Which part? What you need to trigger BS tabs via your own click handler is in the documentation. – C3roe Commented Feb 14, 2017 at 11:37

2 Answers 2

It's happening because the fiddle doesn't properly include bootstrap.js

When the js is included the e.preventDefault works fine..

http://www.codeply./go/FiyO9EGNC0 (css, js & jquery all included w/Codeply)

The tabs are still working w/o the js because of the data-attributes, but the events won't work w/o bootstrap.js

Updated fiddle

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.