如何检查bootstrap模式是否打开，所以我可以使用jquery validate ?

i need to make a validation only if a modal is open, because if i open it, and then i close it, and the i press the button that opens the modal it doesn't work because it is making the jquery validation, but not showing because the modal was dismissed.

我只需要在一个模态打开时进行验证，因为如果我打开它，然后我关闭它，我按下打开模态的按钮，它就不能工作了，因为它正在进行jquery验证，但由于模态被取消而没有显示。

So i want to ad a jquery if modal is open so the i do validate, is this possible?

我想要一个jquery，如果modal是打开的，所以我要验证，这是可能的吗?

<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>

6 个解决方案

#1

131

To avoid the race condition @GregPettit mentions, one can use:

为了避免@GregPettit提到的竞态条件，可以使用:

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

as discussed in Twitter Bootstrap Modal - IsShown.

如在推特上讨论的那样，引导模式-展示。

When the modal is not yet opened, .data('bs.modal') returns undefined, hence the || {} - which will make isShown the (falsy) value undefined. If you're into strictness one could do ($("element").data('bs.modal') || {isShown: false}).isShown

当模态尚未打开时，.data('bs.modal')返回未定义的值，因此||{}-这将使isshow (falsy)值未定义。如果您对严格性感兴趣，可以做($("element").data('bs.modal') || {isshow: false}). isshow

#2

You can use

您可以使用

$('#myModal').hasClass('in');

Bootstrap adds the in class when the modal is open and removes it when closed

Bootstrap在模式打开时添加in类，在关闭时删除

#3

You can also directly use jQuery.

您还可以直接使用jQuery。

$('#myModal').is(':visible');

#4

$("element").data('bs.modal').isShown

won't work if the modal hasn't been shown before. You will need to add an extra condition:

如果之前没有显示模态，就不能工作。您需要添加一个额外的条件:

$("element").data('bs.modal')

so the answer taking into account first appearance:

所以答案是考虑到第一次出现

if ($("element").data('bs.modal') && $("element").data('bs.modal').isShown){
... 
}

#5

Check if a modal is open

检查一个模态是否打开

$('.modal:visible').length && $('body').hasClass('modal-open')

$(' .modal:可见”)。长度& & $(身体).hasClass(“modal-open”)

To attach an event listener

附加一个事件监听器

$(document).on('show.bs.modal', '.modal', function () {
    // run your validation... ( or shown.bs.modal )
});

#6

-1

On bootstrap-modal.js v2.2.0:

bootstrap-modal。js v2.2.0:

( $('element').data('modal') || {}).isShown

#1

131