3

コードでブートストラップ タブを使用しています。

私は以下のhtmlコードを書いています：

<form method="POST" class="form-horizontal" id="userUpdateForm">
  <div class="tabbable">            
    <div class="tab-content">
      <ul class="nav nav-tabs" id="mainTabs">
        <li class="active nohover"><a href="#1A" data-toggle="tab">tab1</a></li>
        <li class="nohover"><a href="#1B" data-toggle="tab">tab2</a></li>
      </ul>
      <div class="tab-pane active" id="1A">
        <div class="control-group">
          <label class="control-label" for="title">Field1:</label>
          <div class="controls">
            <inpu type="text" name="field1" />
            <p class="help-block"></p>
            <div id="titleError"></div>
          </div>
        </div>
        <div class="control-group">
          <label class="control-label" for="title">Field2:</label>
          <div class="controls">
            <inpu type="text" name="field2" />
            <p class="help-block"></p>
            <div id="titleError"></div>
          </div>
        </div>
      </div>
      <div class="tab-pane" id="1B">
        <div class="control-group">
          <label class="control-label" for="title">Field3:</label>
          <div class="controls">
            <inpu type="text" name="field3" />
            <p class="help-block"></p>
            <div id="titleError"></div>
          </div>
        </div>
        <div class="control-group">
          <label class="control-label" for="title">Field4:</label>
          <div class="controls">
            <inpu type="text" name="field4" />
            <p class="help-block"></p>
            <div id="titleError"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

他のタブをクリックしたときにフィールドを検証する必要があります。データが有効でない場合は、同じタブにとどまる必要があります。

サンプルコードを提供して、その方法を教えてください。

検証プラグインを使用しないでください。データを検証するために javascript/jquery コードが必要です。

4

3 に答える 3

1

@Baadshahの回答に加えて、

これを show() イベントにバインドすると、アクティブなタブと次のタブへの参照が得られます。

ドキュメントから：

このイベントは、タブの表示時に発生しますが、新しいタブが表示される前です。event.target と event.relatedTarget を使用して、アクティブなタブと以前のアクティブなタブ (利用可能な場合) をそれぞれターゲットにします。

そしてコード：

$('a[data-toggle="tab"]').on('show', function (e) {
  e.target; // activated tab
  e.relatedTarget; // previous tab
});

http://twitter.github.io/bootstrap/javascript.html#tabs

于 2013-06-07T05:22:09.983 に答える
1

使うだけe.preventDefault(); 

$("tabSelector").click(function() {
      if(validation condition){
         e.preventDefault();
      }
    });

http://api.jquery.com/event.preventDefault/

于 2013-06-07T05:06:06.813 に答える
0

上記の2つの答えを考慮して、私の問題を次のように解決します。

var oldTab = e.relatedTarget.href; // previous tab url
    var oldTabValue=oldTab.split("#");
    if (oldTabValue[1] == '1A'){
        var tab1flag = validateTab1();
        if(tab1flag )
        {
            if(!flag)
            {
                e.target;
            }           
            return;
        }
        else
        {
            e.relatedTarget;
            e.preventDefault();
            return;
        }

    }
于 2013-06-07T07:27:08.493 に答える