Frage Wie überprüft man, ob Bootstrap Modal offen ist, so kann ich jquery validate verwenden


Ich muss eine Validierung nur machen, wenn ein Modal offen ist, denn wenn ich es öffne, und dann schließe ich es, und drücke ich den Knopf, der das Modal öffnet, funktioniert es nicht, weil es die Jquery-Validierung macht, aber nicht Zeigen, weil das Modal entlassen wurde.

Also ich möchte eine jquery anzeigen, wenn modal geöffnet ist, so dass ich das validiere, ist das möglich?

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

75
2017-10-21 23:42


Ursprung


Antworten:


Um die Race-Bedingung von @GregPetti zu vermeiden, kann man Folgendes verwenden:

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

wie in Twitter Bootstrap Modal - IsShown.

Wenn das Modal noch nicht geöffnet ist, .data('bs.modal') kehrt zurück undefined, daher die || {} - was machen wird isShown der (falsche) Wert undefined. Wenn Sie strikt sind, könnte man es tun ($("element").data('bs.modal') || {isShown: false}).isShown


135
2018-01-24 20:09



Sie können verwenden

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

Bootstrap fügt das hinzu in Klasse, wenn das Modal geöffnet ist und entfernt es, wenn es geschlossen ist


59
2017-10-22 00:01



Sie können jQuery auch direkt verwenden.

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

30
2017-10-08 14:09



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

funktioniert nicht, wenn das Modal zuvor nicht angezeigt wurde. Sie müssen eine zusätzliche Bedingung hinzufügen:

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

so die Antwort unter Berücksichtigung des ersten Auftretens:

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

4
2018-04-21 10:27



Auf bootstrap-modal.js v2.2.0:

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

0
2018-06-12 18:19



Überprüfen Sie, ob ein Modal geöffnet ist

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

Um einen Ereignis-Listener anzuhängen

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

0
2018-04-23 08:15