Jak sprawdzić, czy modal bootstrap jest otwarty, abym mógł użyć walidacji jQuery

Muszę dokonać walidacji tylko wtedy, gdy modal jest otwarty, ponieważ jeśli go otworzę, a następnie zamknę, i naciśnę przycisk otwierający modal, nie działa, ponieważ przeprowadza walidację jQuery, ale nie pokazuje, ponieważ modal został odrzucony.

Więc chcę dodać jQuery, jeśli modal jest otwarty, więc sprawdzam, czy jest to możliwe?

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

Aby uniknąć stanu wyścigu, o którym wspomina @GregPettit, można użyć:

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

jak omówiono w Twitter Bootstrap Modal - IsShown .

Gdy modal nie jest jeszcze otwarty, .data('bs.modal')zwraca undefined, stąd || {}- co spowoduje isShown(fałszywą) wartość undefined. Jeśli wolisz ścisłość, możesz to zrobić($("element").data('bs.modal') || {isShown: false}).isShown

Możesz użyć

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

Bootstrap dodaje inklasę, gdy modal jest otwarty i usuwa ją po zamknięciu

Możesz również bezpośrednio użyć jQuery.

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

Sprawdź, czy modal jest otwarty

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

Aby dołączyć detektor zdarzeń

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

Bootstrap 2, 3 Check to jakikolwiek modal otwarty na stronie:

if($('.modal.in').length)

kompatybilna wersja Bootstrap 2, 3, 4+

if($('.modal.in, .modal.show').length)

Tylko Bootstrap 4+

if($('.modal.show').length)

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

nie zadziała, jeśli modal nie był wcześniej wyświetlany. Będziesz musiał dodać dodatkowy warunek:

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

czyli odpowiedź biorąc pod uwagę pierwsze pojawienie się:

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

Możesz także użyć

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

Na bootstrap-modal.js v2.2.0:

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

Po co komplikować rzeczy, skoro można to zrobić za pomocą prostego jQuery, takiego jak śledzenie.

$('#myModal').on('shown.bs.modal', function (e) {
    console.log('myModal is shown');
    // Your actual function here
})