jquery.validate(unobsolusive)でエラーになったタブを開く

エラーになってもタブを勝手に開いてくれないのかよ(´・ω・｀)

$("#reserveeditform").submit(function () {
    $elem = $(".input-validation-error:first");
    $elem.parents().filter(".collapse").collapse("show");
    //tab上にある
    if ($elem.parents().filter(".tab-pane").length > 0) {
        //対象となるタブのAタグを引っ張りだす
        var tabid = $elem.parents().filter(".tab-pane").first().attr("id");
        $("a[href='#" + tabid + "']").tab("show");
    }
});

ややこしい。

bootstrap.accordionを開く

accordionはcollapse.jsで処理されてるので、collapseパネルと同じ考え方でいける。

<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
   Link with href 
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
   Button with data-target 
</button> 
<div class="collapse" id="collapseExample">
   <div class="well">     ...   </div>
 </div>

JavaScript · Bootstrap

構造としては div.collapse に対象のフィールドが内包される形になっているはずなので、

    $elem.parents().filter(".collapse").collapse("show");

と、parentsリストからコンテナを引っ張りだしてcollapse("show") する。

bootstrap.tabを開く

tabはもう少しややこしい。

<div role="tabpanel">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>
</div>

JavaScript · Bootstrap

対象のフィールドはdiv.tab-paneに含まれている。
ただ、このタブを開閉するための.tab()は

Methods $().tab

Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.

JavaScript · Bootstrap

と、別の構造*1の中に入ってる。
parents()では直接辿れないので、「Tab should have either a data-target or an href targeting」を利用して

var tabid = $elem.parents().filter(".tab-pane").first().attr("id");
$("a[href='#" + tabid + "']").tab("show");

としてる。

データがでかい場合、$("a[href='#" + tabid + "']")の負荷がでかくなるので、

$elem.parents().filter("[role='tabpanel']>ul.nav-tabs").find("a[href='#" + tabid + "']").tab("show");

としたほうがいいかもしれない。

*1:ul.nav-tabs>li>a