2017-01-11 8 views
0

私はユーザーがBoostrapタブを使ってページ間を移動する複数ページのフォームを持っています。私は条件付きタブを作成したいので、データに問題がある場合、別のページにタブすることはできません。したがって、実際には、ナビゲーションを傍受し、妥当性をチェックし、OKでナビゲーションを進めたいとします。私はevent.preventDefaultでクリックハンドラを使用しようとしましたが、ハンドラは実行されますが、タブ移動はとにかく起こります。私は自分が望むことをするのは簡単でなければならないと思っていますが、それを働かせることはできません。ブートストラップタブ付きの条件付きナビゲーション?

+0

ポストあなたがこれまでに試したコード。 – ZimSystem

答えて

1

反対の操作を行います。デフォルトでは

  1. はすべてが、最初のタブ(class="disabled")を無効にします。
  2. JavaScript/jQueryを使用して、データの検証を即座に実行します(ユーザーがデータを完成しているので)。
  3. 検証ルールが合格した場合は、他のタブを有効にします(disabledクラスを削除してください)。
+0

このテクニックの変種を使用しました。つまり、検証が成功すると動的にナビゲーションを追加しました。 –

+0

@JohnMoore Cool。しかし、ユーザーの視点から見ると、ワークフローの手順は、無効になっていても常に先行していることが望ましいです。私はそれが最も一般的なデザインだと思う、ちょうど異なるショッピングサービスなどを見て...あなたは常にステップの数を見る:1.購入、2.配送、3、請求、4.確認...彼らは隠すことはありませんそれはあなたからのものであり、背後には良い推論があります。 – bostaf

+0

私は自分自身をよく表現していませんでした。私は、ナビゲーションを動的に追加するのではなく、有効にすることを意味しました。タブはすべて表示され、ページから離れて移動することが安全になるまでは機能しません。 –

1
@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