You can capture the tabsbeforeactivate
event and cancel it if you don't want to transition to the new tab. Something along these lines will work
$tabs.on('tabsbeforeactivate', function(event, ui){
if (ui.newTab.text() == 'Calendar') {
disabled = $calendarTab.attr('aria-disabled');
if(typeof disabled !== undefined && disabled !== 'true'){
if(confirm('Is Your Contact Information Correct?')){
$tabs.tabs('disable', 1);
}
else{
event.preventDefault();
}
}
}
});
Note that you are adding the event handler to the tabs object, not to the individual tabs. I used the text of the tag to decide which one it was, but you could use an id, class, or data element also. Here is the link