☰

ブートストラップモーダルが開いているかどうかを確認して、jQuery 検証を使用できるようにするにはどうすればよいでしょうか? 質問する

tag-icon • tag-icon jquery validation twitter-bootstrap modal-dialog
ブートストラップモーダルが開いているかどうかを確認して、jQuery 検証を使用できるようにするにはどうすればよいでしょうか? 質問する

モーダルが開いている場合にのみ検証を行う必要があります。なぜなら、モーダルを開いてから閉じ、モーダルを開くボタンを押しても、jQuery 検証は行われているものの、モーダルが閉じられたために表示されないため、機能しないからです。

モーダルが開いている場合に検証を行うために jQuery を追加したいのですが、これは可能ですか?

<script>
$(document).ready(function(){

var validator =$('#form1').validate(
 {
  ignore: "",
  rules: {

usu_login: {
  required: true
},
usu_password: {
  required: true
},
usu_email: {
  required: true
},
usu_nombre1: {
  required: true
},
usu_apellido1: {
  required: true
},
usu_fecha_nac: {
  required: true
},
usu_cedula: {
  required: true
},
usu_telefono1: {
  required: true
},
rol_id: {
  required: true
},
dependencia_id: {
  required: true
},
  },

  highlight: function(element) {
$(element).closest('.grupo').addClass('has-error');
        if($(".tab-content").find("div.tab-pane.active:has(div.has-error)").length == 0)
        {
            $(".tab-content").find("div.tab-pane:hidden:has(div.has-error)").each(function(index, tab)
            {
                var id = $(tab).attr("id");
        
                $('a[href="#' + id + '"]').tab('show');
            });
        }
  },
  unhighlight: function(element) {
$(element).closest('.grupo').removeClass('has-error');
  }
 });

}); // end document.ready

</script>

ベストアンサー1

// For Bootstrap 5
$('#myModal').hasClass('show');

// For Bootstrap 3 and 4, to avoid the race condition @GregPettit mentions, one can use:

($("#myModal").data('bs.modal') || {})._isShown    // Bootstrap 4
($("#myModal").data('bs.modal') || {}).isShown     // Bootstrap <= 3

// or, with the optional chaining operator (?.)
$("#myModal").data('bs.modal')?._isShown    // Bootstrap 4
$("#myModal").data('bs.modal')?.isShown     // Bootstrap <= 3

で議論したようにTwitter Bootstrap モーダル - IsShown。

モーダルがまだ開かれていない場合は.data('bs.modal')を返しますundefined。つまり、 - は（偽の）値|| {}を作成します。厳密に言うと、次のようにすることができます。isShownundefined($("element").data('bs.modal') || {isShown: false}).isShown

おすすめ記事