Comment vérifier si la modale bootstrap est ouverte, afin que je puisse utiliser la validation jquery?

Question

J'ai besoin de faire une validation uniquement si une fenêtre modale est ouverte, car si je l'ouvre, puis je la ferme, et ensuite je clique sur le bouton qui ouvre la fenêtre modale, cela ne fonctionne pas car il effectue la validation jquery, mais ne l'affiche pas car la modale a été dismissée.

Donc je veux ajouter un jquery si la modale est ouverte alors je fais la validation, est-ce possible?

$(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');
  }
 });

}); // fin du document.ready

Answer 1

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

// Pour Bootstrap 3 et 4, pour éviter la condition de concurrence mentionnée par @GregPettit, on peut utiliser :

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

// ou, avec l'opérateur de chaînage optionnel (?.)
$("#myModal").data('bs.modal')?._isShown    // Bootstrap 4
$("#myModal").data('bs.modal')?.isShown     // Bootstrap <= 3

comme discuté dans Twitter Bootstrap Modal - IsShown.

Lorsque le modal n'est pas encore ouvert, .data('bs.modal') retourne undefined, d'où le || {} - ce qui fera de isShown la valeur (fausse) undefined. Si vous êtes strict, on pourrait faire ($("élément").data('bs.modal') || {isShown: false}).isShown

Answer 2

Vous pouvez également utiliser directement jQuery.

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

Answer 3

Vous pouvez utiliser

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

Bootstrap ajoute la classe in lorsque le modal est ouvert et la supprime lorsque celui-ci est fermé

Answer 4

Bootstrap 2 , 3 Vérifiez si une modal est ouverte dans la page :

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

Version compatible Bootstrap 2 , 3 , 4+

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

Seulement Bootstrap 4+

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

Answer 5

Vérifiez si un modal est ouvert

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

Pour attacher un écouteur d'événements

$(document).on('show.bs.modal', '.modal', function () {
    // exécutez votre validation ... (show.bs.modal)
});