Comment vérifier si bootstrap modal est ouvert, afin que je puisse utiliser jquery validate


111

je dois faire une validation uniquement si un modal est ouvert, car si je l'ouvre, puis je le ferme, et que j'appuie sur le bouton qui ouvre le modal, cela ne fonctionne pas car il effectue la validation jquery, mais pas s'affiche parce que le modal a été rejeté.

Donc je veux ajouter une jquery si modal est ouvert pour que je valide, est-ce possible?

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

Réponses:


183

Pour éviter la condition de concurrence mentionnée par @GregPettit, on peut utiliser:

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

comme indiqué dans Twitter Bootstrap Modal - IsShown .

Lorsque le modal n'est pas encore ouvert, .data('bs.modal')retourne undefined, d'où le || {}- qui rendra isShownla valeur (fausse) undefined. Si vous êtes dans la rigueur, on pourrait le faire($("element").data('bs.modal') || {isShown: false}).isShown


2
Il y a un problème avec cela, si le modal n'est pas ouvert, vous obtiendrez 'undefined' de $ ("element"). Data ('bs.modal')
Flezcano

._isShown a fonctionné pour moi, j'utilise bootstrap 4 alpha
Iftikar Urrhman Khan

8
Dans Bootstrap 4, ce n'est _isShownpas le cas isShown.
elquimista

Je vérifie juste si modal a «montré» la classe (bootstrap 4) - fonctionne comme j'en ai besoin. La vérification de _isShown est-elle meilleure d'une certaine manière?
trainoasis

Pouvez-vous s'il vous plaît partager la solution en tapuscrit?
Surajit Biswas

80

Vous pouvez utiliser

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

Bootstrap ajoute la inclasse lorsque le modal est ouvert et le supprime lorsqu'il est fermé


4
Cela s'avère un peu fragile avec l'option de fondu et les clics rapides ou le déclenchement d'un modal via un appel Ajax. Le retard du fondu peut créer des conditions de course. Pourtant, un moyen utile de s'y connecter lorsque le contenu est statique et que le modèle n'apparaît que pendant l'interaction de l'utilisateur!
Greg Pettit le

Le moyen le plus sûr et le plus sûr d'éviter une condition de concurrence sur un modal Bootstrap est de s'abonner à ses événements shown.bs.modalou hidden.bs.modal. De cette façon, lorsque votre code d'événement prend le contrôle, vous êtes certain que la boîte de dialogue n'est pas dans un état délicat.
Eric Lloyd

Est-ce valide dans la version 4 de Bootstrap?
Mahdi Alkhatib

1
@MahdiAlkhatib Non, cela ne fonctionne pas dans Bootstrap 4. Vous pouvez remplacer 'in'par 'show'Bootstrap 4.
Philip Stratford

61

Vous pouvez également utiliser directement jQuery.

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

1
Comme quand la réponse est simple. Si j'utilise ajax, j'utilise ceci dans le onbefore et vérifie et renvoie false, de cette façon, cela empêche également les appels multiples au serveur. Merci!
eaglei22

La réponse acceptée a renvoyé undefined ou null. Cela a fonctionné parfaitement. Merci!
Alex le

8

Vérifier 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 () {
    // run your validation... ( or shown.bs.modal )
});

6

Bootstrap 2, 3 Check est n'importe quel modal ouvert 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)

3
J'utilise Bootstrap 4.1.3et il ajoute de la showclasse au lieu de in.
Arif Hussain

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

ne fonctionnera pas si le modal n'a pas été affiché auparavant. Vous devrez ajouter une condition supplémentaire:

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

donc la réponse en tenant compte de la première apparition:

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



0

Pourquoi compliquer les choses quand cela peut être fait avec un jQuery simple comme suit.

$('#myModal').on('shown.bs.modal', function (e) {
    console.log('myModal is shown');
    // Your actual function here
})
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.