10

Twitter のいくつかの Bootstrap タブに 1 つのフォームがあります。

<form id="personal-data" class="form-horizontal">
  <div class="tabbable">
    <ul id="tab" class="nav nav-tabs">
      <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
      <li class=""><a href="#profile" data-toggle="tab">Profile</a></li>
      <!-- ... -->
    </ul>

    <div id="myTabContent" class="tab-content">
      <div class="tab-pane fade active in" id="home">
        <fieldset>
          <div class="control-group">
            <div class="controls">
              <input type="text" id="field1">
            </div>
          </div>
        </fieldset>
      </div>
      <div class="tab-pane fade" id="profile">
        <fieldset>
          <div class="control-group">
            <div class="controls">
              <input type="text" id="field2">
            </div>
          </div>
        </fieldset>          
      </div>

アクティブなタブでjQuery検証を使用してフォームをvalid食べ、無効な値を持つフィールドが同じタブにある場合、検証は失敗します(これは正しいです)。しかし、あるタブにいて、無効な値が別のタブにある場合、検証は を返しますがtrue、これは正しくありません。どうすれば修正できますか？別のタブでそのフィールドを強調表示するにはどうすればよいですか?

このデモをご覧ください([次へ] ボタンを押すだけです。エラー メッセージが表示され、最後のタブに移動してそこで [終了] を押します)。

4

6 に答える 6

15

あなたの問題は、検証が可視要素でのみ行われるという事実にあると思います。

この問題を読むと、バージョン 1.9 であることがわかります

修正 #189 - :hidden 要素がデフォルトで無視されるようになりました

そして、いくつかのコメントダウンの解決策

$.validator.setDefaults({
    ignore: ""
});
于 2012-04-13T17:54:37.313 に答える
3

タブを有効にする私の解決策

...
highlight: function(label) {
        $(label).closest('.control-group').addClass('error');

        $(".tab-content").find("div.tab-pane:hidden:has(div.error)").each( function(){
            var id = $(this).attr("id");
            $('#tabs a[href="#'+id+'"]').tab('show');
        });
},
...

js でタブを変更できるようにするには、このコードを追加する必要があります

$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
});
于 2012-10-09T18:42:48.513 に答える
1

あなたのコードのおかげで、エラーのある最初のタブに移動する部分を除いて、私の問題のほとんどが解決されました。私は次のように回避しました：

        var IsValid = true;

        // Validate Each Bootstrap tab
        $(".tab-content").find("div.tab-pane").each(function (index, tab) {
            var id = $(tab).attr("id");
            $('a[href="#' + id + '"]').tab('show');

            var IsTabValid = $("#SomeForm").valid();

            if (!IsTabValid) {
                IsValid = false;
            }
        });

        // Show first tab with error
        $(".tab-content").find("div.tab-pane").each(function (index, tab) {
            var id = $(tab).attr("id");
            $('a[href="#' + id + '"]').tab('show');

            var IsTabValid = $("#SomeForm").valid();

            if (!IsTabValid) {
                return false; // Break each loop
            }
        });
于 2014-04-25T03:41:03.740 に答える
0

jQuery Validate の正確な解決策ではありませんが、フォーム要素で「無効な」イベントを使用して、HTML5 検証エラーをキャッチし、フォーカスされた要素を取得し、それぞれのタブ ペインを見つけて表示することができます。

私はこれをしました。

$("form").find("input, select").on("invalid", function() {
  var id = $(this).parents(".tab-pane").attr("id");

  $("#tabs-selector ul").find("li a[href='#" + id + "']").tab("show");
});

これがお役に立てば幸いです。繰り返しますが、これは HTML5 の場合、または jQuery Validate が無効なイベントを発生させる場合です。

于 2014-01-10T18:41:39.283 に答える
0

使用しているこれらの jQuery タブはありますか? 他のすべてのタブを非アクティブにして、各フォームで送信されたデータが検証に合格するまで徐々にアクティブにすることができます。コンストラクターで最初のものを除くすべてを無効にし、各検証後に次のものを有効にします。

.tabs( "enable" , index )

詳細はこちらをご覧ください。

最終的な検証方法を 1 つ最後に配置し、タブに応じてすべてのコンテンツを表示して、リンクのリロードを回避することもできます。

于 2012-04-13T17:37:12.320 に答える