Cómo verificar si el modo de arranque está abierto, para poder usar jquery validar

111

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 mostrando porque el modal fue descartado.

Entonces, quiero agregar un jquery si modal está abierto, así que 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>

— Mariana hernandez
fuente

183

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 comenta en Twitter Bootstrap Modal - IsShown .

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

— Brian M. Hunt
fuente

2

Hay un problema con esto, si el modal no está abierto, obtendrá 'undefined' de $ ("element"). Data ('bs.modal')

— Flezcano

._isShown funcionó para mí, estoy usando bootstrap 4 alpha

— Iftikar Urrhman Khan

8

En Bootstrap 4, que es _isShown, no isShown.

— elquimista

Solo estoy verificando si modal tiene la clase 'mostrada' (bootstrap 4): funciona cuando lo necesito. ¿Es mejor comprobar _isShown de alguna manera?

— trainoasis

¿Puede compartir la solución en texto mecanografiado?

— Surajit Biswas

80

Puedes usar

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

Bootstrap agrega la inclase cuando el modal está abierto y la elimina cuando está cerrado

— tleef
fuente

4

Esto resulta ser un poco frágil con la opción de desvanecimiento y los clics rápidos o la activación de un modal a través de una llamada Ajax. La demora en el desvanecimiento puede crear condiciones de carrera. Aún así, ¡una forma útil de conectarse cuando el contenido es estático y el modelo solo aparece durante la interacción del usuario!

— Greg Pettit

La forma más segura de evitar una condición de carrera en un modal Bootstrap es suscribirse a sus eventos shown.bs.modalo hidden.bs.modal. De esa manera, cuando el código de su evento toma el control, está completamente seguro de que el diálogo no está en un estado delicado.

— Eric Lloyd

¿Es válido en la versión 4 de Bootstrap?

— Mahdi Alkhatib

1

@MahdiAlkhatib No, esto no funciona en Bootstrap 4. Podrías reemplazar 'in'con 'show'Bootstrap 4.

— Philip Stratford

61

También puede usar jQuery directamente.

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

— alexoviedo999
fuente

1

Como cuando la respuesta es simple. Si uso ajax, lo uso en el antes y verifico y devuelvo falso, de esa manera esto también evita múltiples llamadas al servidor. ¡Gracias!

— eaglei22

La respuesta aceptada devolvió indefinida o nula. Esto funcionó a la perfección. ¡Gracias!

— Alex

8

Comprueba si un modal está abierto

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

Para adjuntar un detector de eventos

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

— Raja Khoury
fuente

6

Bootstrap 2, 3 Check es cualquier modal abierto en la página:

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

versión compatible Bootstrap 2, 3, 4+

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

Solo Bootstrap 4+

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

3

Estoy usando Bootstrap 4.1.3y agrega showclase en lugar de in.

— Arif Hussain

4

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

no funcionará si el modal no se ha mostrado antes. Deberá agregar una condición adicional:

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

entonces la respuesta teniendo en cuenta la primera aparición:

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

— joanfihu
fuente

3

También puedes usar

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

— Bhavesh Lalwani
fuente

0

En bootstrap-modal.js v2.2.0:

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

— Ricardo
fuente

Respuesta probada, créditos originales al respuesta aceptada

— Ricardo

2

¿Por qué se vota negativamente? Era precisamente lo que necesitaba

— Rachel Edge

0

¿Por qué complicar las cosas cuando se puede hacer con jQuery simple como seguir?

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

— Sokka Boomerang
fuente