twitter-bootstrap-3 - Bootstrap タブを使用した jQuery 検証

Question

複数の Bootstrap タブを含むフォームがあり、その中に複数の入力フィールドと選択フィールドがあります。一部は必須で、一部は必須ではありません。

jQuery Validation プラグインを使用してフォームを検証しています。以下は、正常に動作しているブートストラップ css を使用してエラーを強調表示および非強調表示することです。

    highlight: function(element) {
        $(element).closest('.input-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.input-group').removeClass('has-error');
    },

私が本当に必要としているのは、フィールドが検証されていないタブがある場合、そのタブも強調表示したいということです。

以下のコードを使用しましたが、面白いのは、コードが機能してタブが赤色で強調表示される場合と機能しない場合があることです。

if($(".tab-content").find("div.tab-pane:has(div.has-error)").length != 0){
    $(".tab-content").find("div.tab-pane:has(div.has-error)").each(function(index, tab){
        var id = $(tab).attr("id");

        $('a[href="#' + id + '"]').tab('show').addClass('bg-danger');
    });
} else {
    $(".nav-tabs li a").each(function(){
        if($(this).hasClass('bg-danger')){
            $(this).removeClass('bg-danger');
        }
    });
}

エラーのある必須フィールドがある場合、タブを強調表示するにはどうすればよいですか?