未分類

BootStrapのタブ使用時にjQueryのValidateプラグインを非表示タブに対しても適応する対処法

概要

BootStrapのタブ使用時に非表示タブに対してバリデーションが効かないことが判明した。以下、非表示タブに対してもバリデーションチェックを適応する対処法です。ignoreオプションが未指定の場合:hiddenは無視するような設定となっているので初期化してあげます。後はinvalidaHandlerでエラー発生時にエラーリストの一番最初の要素のタブに遷移し、フォーカスをするようにしています。タイミングでうまくfocusしない場合があるため、タブ読み込み完了時にもerroを見に行きfocusを設定するようにしています。

対処法

$("自分のform").validate({
  rules: {
    ・・・///各々バリデーションルール記載（省略）
  },
  invalidHandler: function(form, validator) {
       var parentId = $(validator.errorList[0].element).closest(".tab-pane").attr('id');
       $('a[href="#' + parentId + '"]').tab('show');
       $(validator.errorList[0].element).focus();
  },
  ignore: []
});

//念のため、タブ読み込み完了時にも処理
$('a[data-toggle="tab"]').on('shown.bs.tab', function() {
     if ($("select.error,input.error").length > 0) {
         $("select.error,input.error")[0].focus();
     }
});

-未分類