Условная навигация с вкладками Bootstrap?

Question

У меня есть многостраничная форма, в которой пользователь перемещается между страницами, используя вкладки Boostrap. Я хочу сделать tabbing условным, так что, если есть проблемы с данными, они не могут перейти на другую страницу. Поэтому я действительно хочу перехватить навигацию, проверить ее достоверность, а затем, если ОК, пусть начнется навигация. Я попытался использовать обработчик кликов с event.preventDefault, и обработчик работает, но табуляция происходит в любом случае. Я полагаю, что это должно быть просто сделать то, что я хочу, но я не могу заставить его работать.

Answer 1

ли обратное:

1. По умолчанию отключить все, кроме первой вкладке (class="disabled").
2. Выполнять проверку данных «на лету» (по мере того, как данные выполняются пользователем), с использованием JavaScript/jQuery.
3. Если правила проверки пройдут, включите другую вкладку (удалите класс disabled).

Answer 2

Подобно тому, что @bostaf рекомендует вы можете сделать что-то вроде этого ...

// disable all tabs 
$('[data-toggle=tab]').click(function() { 
    return false;} 
).addClass("text-muted"); 

var validated = function(tab){ 
    tab.unbind('click').removeClass('text-muted'); 
} 

//validate inputs on click of button 
$('.btn-ok').click(function(){ 

    var allValid = true; 
    // get each input in this tab pane and validate 
    $(this).parents('.tab-pane').find('.form-control').each(function(i,e){ 

     // add some condition(s) to validate each input 
     if (valid){ 
      // validation passed 
      allValid = true; 
     } else { 
      // validation failed 
      allValid = false; 
     } 

    }); 

    if (allValid) { 
     var tabIndex = $(this).parents('.tab-pane').index(); 
     validated($('[data-toggle]').eq(tabIndex+1)); 
    } 

}); 

http://www.bootply.com/PnCp18N14s