私はユーザーがBoostrapタブを使ってページ間を移動する複数ページのフォームを持っています。私は条件付きタブを作成したいので、データに問題がある場合、別のページにタブすることはできません。したがって、実際には、ナビゲーションを傍受し、妥当性をチェックし、OKでナビゲーションを進めたいとします。私はevent.preventDefaultでクリックハンドラを使用しようとしましたが、ハンドラは実行されますが、タブ移動はとにかく起こります。私は自分が望むことをするのは簡単でなければならないと思っていますが、それを働かせることはできません。ブートストラップタブ付きの条件付きナビゲーション？
反対の操作を行います。デフォルトでは
class="disabled"）を無効にします。disabledクラスを削除してください）。このテクニックの変種を使用しました。つまり、検証が成功すると動的にナビゲーションを追加しました。 –
@JohnMoore Cool。しかし、ユーザーの視点から見ると、ワークフローの手順は、無効になっていても常に先行していることが望ましいです。私はそれが最も一般的なデザインだと思う、ちょうど異なるショッピングサービスなどを見て...あなたは常にステップの数を見る：1.購入、2.配送、3、請求、4.確認...彼らは隠すことはありませんそれはあなたからのものであり、背後には良い推論があります。 – 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));
}
});
ポストあなたがこれまでに試したコード。 – ZimSystem