1. ホーム
  2. jquery

[解決済み] ブートストラップモーダルが開いているかどうかを確認する方法。

2022-07-21 08:01:53

質問

モーダルが開いているときだけ検証を行う必要があります。モーダルを開いてから閉じ、モーダルを開くボタンを押すと、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>

どのように解決するのですか?

GregPettit が指摘するレースコンディションを回避するには、次のようにします。

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

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

で説明したように Twitter Bootstrap Modal - IsShown .

モーダルがまだ開かれていないとき。 .data('bs.modal')undefined を返すので || {} - を作ることになります。 isShown という(偽の)値 undefined . もしあなたが厳密さを求めるのであれば、次のようにすることもできます。 ($("element").data('bs.modal') || {isShown: false}).isShown