Cómo comprobar si el modal de bootstrap está abierto, para que pueda usar jquery validate


Necesito hacer una validación solo si un modal está abierto, porque si lo abro, y luego lo cierro, y presiono el botón que abre el modal no funciona porque está haciendo la validación de jquery, pero no se muestra porque el modal fue descartado.

Así que quiero ad un jquery si modal está abierto por lo que la valido, es esto posible?

<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>
Author: thiagobraga, 2013-10-22

6 answers

Para evitar la condición de carrera que menciona @GregPettit, se puede usar:

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

Como se discutió en Twitter Bootstrap Modal - isShown.

Cuando el modal aún no está abierto, .data('bs.modal') devuelve undefined, de ahí el || {} - que hará isShown el valor (falso) undefined. Si usted está en el rigor uno podría hacer ($("element").data('bs.modal') || {isShown: false}).isShown

 137
Author: Brian M. Hunt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-02 16:42:33

Puedes usar

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

Bootstrap agrega la clase in cuando el modal está abierto y lo elimina cuando está cerrado

 59
Author: tleef,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-22 00:01:07

También puedes usar jQuery directamente.

$('#myModal').is(':visible');
 31
Author: alexoviedo999,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-09-18 06:42:01
$("element").data('bs.modal').isShown

No funcionará si el modal no se ha mostrado antes. Tendrá que añadir una condición adicional:

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

Así que la respuesta teniendo en cuenta la primera aparición:

if ($("element").data('bs.modal') && $("element").data('bs.modal').isShown){
... 
}
 4
Author: joanfihu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-04-21 10:27:14

En bootstrap-modal.js v2. 2. 0:

( $('element').data('modal') || {}).isShown
 0
Author: Ricardo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-12 18:19:10

Compruebe si un modal está abierto

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

Para adjuntar un oyente de eventos

$(document).on('show.bs.modal', '.modal', function () {
    // run your validation... ( or shown.bs.modal )
});
 0
Author: Raja Khoury,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-23 08:15:41