So überprüfen Sie, ob das Bootstrap-Modal geöffnet ist, damit ich jquery validate verwenden kann

111

Ich muss eine Validierung nur durchführen, wenn ein Modal geöffnet ist, denn wenn ich es öffne und dann schließe und den Knopf drücke, der das Modal öffnet, funktioniert es nicht, weil es die JQuery-Validierung durchführt, aber nicht zeigt, weil das Modal entlassen wurde.

Ich möchte also eine Abfrage hinzufügen, wenn Modal geöffnet ist, damit ich validiere. Ist dies 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>
Mariana Hernandez
quelle

Antworten:

182

Um die von @GregPettit erwähnten Rennbedingungen 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 beschrieben .

Wenn das Modal noch nicht geöffnet ist, wird .data('bs.modal')zurückgegeben undefined, daher das || {}-, das isShownden (falschen) Wert ergibt undefined. Wenn Sie in Strenge sind, könnte man tun($("element").data('bs.modal') || {isShown: false}).isShown

Brian M. Hunt
quelle
1
Es gibt ein Problem damit, wenn das Modal nicht geöffnet ist, erhalten Sie 'undefined' von $ ("element"). Data ('bs.modal')
Flezcano
._isShown hat für mich funktioniert, ich benutze Bootstrap 4 Alpha
Iftikar Urrhman Khan
8
In Bootstrap 4 ist dies _isShownnicht der Fall isShown.
Elquimista
Ich überprüfe nur, ob Modal die Klasse "angezeigt" hat (Bootstrap 4) - funktioniert so, wie ich es brauche. Ist die Überprüfung von _isShown in irgendeiner Weise besser?
Trainoasis
Können Sie bitte die Lösung in Typoskript teilen?
Surajit Biswas
79

Sie können verwenden

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

Bootstrap fügt die inKlasse hinzu, wenn das Modal geöffnet ist, und entfernt sie, wenn es geschlossen ist

Tleef
quelle
4
Dies stellt sich mit der Fade-Option und schnellen Klicks oder dem Auslösen eines Modals über einen Ajax-Aufruf als etwas fragil heraus. Die Zeitverzögerung beim Überblenden kann zu Rennbedingungen führen. Eine nützliche Möglichkeit, sich darauf einzulassen, wenn der Inhalt statisch ist und das Modell nur während der Benutzerinteraktion angezeigt wird!
Greg Pettit
Der sicherste und sicherste Weg, um eine Race-Bedingung auf einem Bootstrap-Modal zu vermeiden, besteht darin, seine shown.bs.modaloder hidden.bs.modalEreignisse zu abonnieren . Auf diese Weise sind Sie absolut sicher, dass sich der Dialog nicht in einem empfindlichen Zustand befindet, wenn Ihr Ereigniscode die Kontrolle erhält.
Eric Lloyd
Ist es in Bootstrap Version 4 gültig?
Mahdi Alkhatib
1
@MahdiAlkhatib Nein, das funktioniert nicht in Bootstrap 4. Sie ersetzen könnte 'in'mit 'show'für Bootstrap 4.
Philip Stratford
61

Sie können jQuery auch direkt verwenden.

$('#myModal').is(':visible');
alexoviedo999
quelle
1
Zum Beispiel, wenn die Antwort einfach ist. Wenn ich Ajax verwende, verwende ich dies im Vorfeld und überprüfe und gebe false zurück. Auf diese Weise werden auch mehrere Aufrufe des Servers verhindert. Vielen Dank!
eaglei22
Die akzeptierte Antwort gab undefiniert oder null zurück. Das hat einwandfrei funktioniert. Vielen Dank!
Alex
8

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

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

So fügen Sie einen Ereignis-Listener hinzu

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

Bootstrap 2, 3 Überprüfen Sie , ob ein Modal auf der Seite geöffnet ist:

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

kompatible Version Bootstrap 2, 3, 4+

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

Nur Bootstrap 4+

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

quelle
3
Ich benutze Bootstrap 4.1.3und es fügt showKlasse statt in.
Arif Hussain
4
$("element").data('bs.modal').isShown

funktioniert nicht, wenn das Modal noch 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){
... 
}
joanfihu
quelle
3

Sie können auch verwenden

$('#myModal').hasClass('show');
Bhavesh Lalwani
quelle
0

Auf bootstrap-modal.js v2.2.0:

( $('element').data('modal') || {}).isShown
Ricardo
quelle
Antwort getestet, Original Credits auf die akzeptierte Antwort
Ricardo
2
Warum wird das abgelehnt? Es war genau das, was ich brauchte
Rachel Edge
0

Warum Dinge komplizieren, wenn es mit einfacher jQuery wie folgt gemacht werden kann?

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