Come verificare se il modal bootstrap è aperto, quindi posso usare jquery validate

111

devo fare una convalida solo se un modale è aperto, perché se lo apro, e poi lo chiudo, e premo il pulsante che apre il modale non funziona perché sta facendo la convalida jquery, ma non mostrando perché il modal è stato ignorato.

Quindi voglio aggiungere un jquery se modal è aperto, quindi convalido, è possibile?

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

— Mariana Hernandez
fonte

183

Per evitare la race condition menzionata da @GregPettit, è possibile utilizzare:

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

come discusso in Twitter Bootstrap Modal - IsShown .

Quando il modale non è ancora aperto, .data('bs.modal')restituisce undefined, da qui il || {}- che renderà isShownil valore (falso) undefined. Se sei severo, si potrebbe fare($("element").data('bs.modal') || {isShown: false}).isShown

— Brian M. Hunt
fonte

2

C'è un problema con questo, se il modal non è aperto, otterrai 'undefined' da $ ("element"). Data ('bs.modal')

— Flezcano

._isShown ha funzionato per me, sto usando bootstrap 4 alpha

— Iftikar Urrhman Khan

8

In Bootstrap 4, non lo _isShownè isShown.

— elquimista

Sto solo controllando se modal ha la classe "mostrata" (bootstrap 4) - funziona come ne ho bisogno. Controllare _isShown è meglio in qualche modo?

— trainoasis

Puoi condividere la soluzione in dattiloscritto?

— Surajit Biswas

80

Puoi usare

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

Bootstrap aggiunge la inclasse quando il modale è aperto e lo rimuove quando viene chiuso

— tleef
fonte

4

Questo risulta essere un po 'fragile con l'opzione di dissolvenza e clic veloci o l'attivazione di un modale tramite una chiamata Ajax. Il ritardo nella dissolvenza può creare condizioni di gara. Tuttavia, un modo utile per agganciarlo quando i contenuti sono statici e il modello si apre solo durante l'interazione dell'utente!

— Greg Pettit

Il modo più sicuro e sicuro per evitare una condizione di competizione su un modal Bootstrap è iscriversi ai suoi eventi shown.bs.modalo hidden.bs.modal. In questo modo, quando il codice dell'evento ottiene il controllo, sei assolutamente certo che il dialogo non sia in uno stato delicato.

— Eric Lloyd

È valido in Bootstrap versione 4?

— Mahdi Alkhatib

1

@MahdiAlkhatib No, non funziona in Bootstrap 4. Potresti sostituire 'in'con 'show'Bootstrap 4.

— Philip Stratford

61

Puoi anche usare direttamente jQuery.

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

— alexoviedo999
fonte

1

Come quando le risposte sono semplici. Se utilizzo ajax, lo uso in onbefore e controllo e restituisco false, in questo modo questo impedisce anche più chiamate al server. Grazie!

— eaglei22

La risposta accettata ha restituito undefined o null. Questo ha funzionato perfettamente. Grazie!

— Alex

8

Controlla se un modale è aperto

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

Per allegare un listener di eventi

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

— Raja Khoury
fonte

6

Bootstrap 2, 3 Check è qualsiasi modale aperto nella pagina:

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

versione compatibile Bootstrap 2, 3, 4+

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

Solo Bootstrap 4+

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

3

Sto usando Bootstrap 4.1.3e aggiunge showclasse invece di in.

— Arif Hussain

4

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

non funzionerà se il modale non è stato mostrato prima. Dovrai aggiungere una condizione extra:

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

quindi la risposta tenendo conto della prima apparizione:

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

— joanfihu
fonte

3

Puoi anche usare

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

— Bhavesh Lalwani
fonte

0

Su bootstrap-modal.js v2.2.0:

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

— Ricardo
fonte

Risposta testata, crediti originali alla risposta accettata

— Ricardo

2

Perché questo è downvoted? Era esattamente ciò di cui avevo bisogno

— Rachel Edge,

0

Perché complicare le cose quando può essere fatto con semplici jQuery come seguire.

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

— Sokka Boomerang
fonte