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

111

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>
jquery validation twitter-bootstrap modal-dialog Mariana Hernandez
źródło

Odpowiedzi:

183

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

Brian M. Hunt
źródło
2
Jest z tym problem, jeśli modal nie jest otwarty, otrzymasz „undefined” z $ („element”). Data („bs.modal”)
Flezcano
._isShown działało dla mnie, używam bootstrap 4 alpha
Iftikar Urrhman Khan
8
W Bootstrap 4 tak _isShownnie jest isShown.
elquimista
Po prostu sprawdzam, czy modal ma 'pokazaną' klasę (bootstrap 4) - działa tak, jak tego potrzebuję. Czy sprawdzanie _isShown jest lepsze w jakiś sposób?
trainoasis
Czy możesz podzielić się rozwiązaniem na maszynie?
Surajit Biswas
80

Możesz użyć

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

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

tleef
źródło
4
Okazuje się, że jest to trochę kruche z opcją zanikania i szybkimi kliknięciami lub wyzwalaniem modalu przez wywołanie Ajax. Opóźnienie w zanikaniu może stworzyć warunki wyścigu. Mimo to przydatny sposób na podłączenie się do niego, gdy zawartość jest statyczna, a model pojawia się tylko podczas interakcji z użytkownikiem!
Greg Pettit
Najbezpieczniejszym i najpewniejszym sposobem uniknięcia sytuacji wyścigu w module Bootstrap jest subskrybowanie jego shown.bs.modallub hidden.bs.modalwydarzeń. W ten sposób, gdy kod zdarzenia przejmuje kontrolę, nie masz pewności, że okno dialogowe nie jest drażliwe.
Eric Lloyd
Czy to działa w wersji Bootstrap 4?
Mahdi Alkhatib
1
@MahdiAlkhatib Nie, to nie działa w Bootstrap 4. Można wymienić 'in'z 'show'na Bootstrap 4.
Philip Stratford
61

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

$('#myModal').is(':visible');
alexoviedo999
źródło
1
Jak wtedy, gdy odpowiedź jest prosta. Jeśli korzystam z ajax, używam tego w onbefore i sprawdzam i zwracam false, w ten sposób zapobiega to również wielu wywołaniom serwera. Dzięki!
eaglei 22
Zaakceptowana odpowiedź zwróciła wartość undefined lub zerową. To działało bez zarzutu. Dzięki!
Alex
8

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 )
});
Raja Khoury
źródło
6

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)

źródło
3
Używam Bootstrap 4.1.3i showzamiast tego dodaje klasę in.
Arif Hussain
4 
$("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){
... 
}
joanfihu
źródło
3

Możesz także użyć

$('#myModal').hasClass('show');
Bhavesh Lalwani
źródło
0

Na bootstrap-modal.js v2.2.0:

( $('element').data('modal') || {}).isShown
Ricardo
źródło
Odpowiedź przetestowana, oryginalne kredyty za zaakceptowaną odpowiedź
Ricardo
2
Dlaczego jest to odrzucane? To było dokładnie to, czego potrzebowałem
Rachel Edge
0

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
})
Sokka Boomerang
źródło