Como verificar se o modal de bootstrap está aberto, para que eu possa usar o jquery validate

111

preciso fazer uma validação apenas se um modal estiver aberto, porque se eu abrir, e depois fechar, e ao pressionar o botão que abre o modal ele não funciona porque está fazendo a validação do jquery, mas não mostrando porque o modal foi dispensado.

Então, eu quero anunciar um jquery se o modal estiver aberto para que eu valide, isso é possível?

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

Respostas:

183

Para evitar a condição de corrida que @GregPettit menciona, pode-se usar:

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

conforme discutido em Twitter Bootstrap Modal - IsShown .

Quando o modal ainda não está aberto, .data('bs.modal')retorna undefined, portanto o || {}- o que tornará isShowno valor (falso) undefined. Se você for rigoroso, pode-se fazer($("element").data('bs.modal') || {isShown: false}).isShown

Brian M. Hunt
fonte
2
Há um problema com isso, se o modal não estiver aberto, você obterá 'undefined' de $ ("element"). Data ('bs.modal')
Flezcano
._isMostrado funcionou para mim, estou usando bootstrap 4 alpha
Iftikar Urrhman Khan
8
Em Bootstrap 4, é _isShown, não isShown.
elquimista
Estou apenas verificando se modal tem classe 'mostrada' (bootstrap 4) - funciona conforme preciso. A verificação _isShown é melhor de alguma forma?
trainoasis de
Você pode compartilhar a solução digitada?
Surajit Biswas
80

Você pode usar

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

O bootstrap adiciona a inclasse quando o modal está aberto e remove-a quando fechado

tleef
fonte
4
Isso acaba sendo um pouco frágil com a opção de fade e cliques rápidos ou acionando um modal por meio de uma chamada Ajax. O atraso no fade pode criar condições de corrida. Ainda assim, uma maneira útil de se conectar a ele quando o conteúdo é estático e o modelo só aparece durante a interação do usuário!
Greg Pettit
A maneira mais segura e segura de evitar uma condição de corrida em um modal Bootstrap é inscrever-se em seus eventos shown.bs.modalou hidden.bs.modal. Dessa forma, quando seu código de evento obtém controle, você tem certeza absoluta de que o diálogo não está em um estado delicado.
Eric Lloyd
É válido no Bootstrap versão 4?
Mahdi Alkhatib
1
@MahdiAlkhatib Não, isso não funciona em Bootstrap 4. Você poderia substituir 'in'com 'show'a Bootstrap 4.
Philip Stratford
61

Você também pode usar o jQuery diretamente.

$('#myModal').is(':visible');
alexoviedo999
fonte
1
Como quando a resposta é simples. Se estiver usando ajax, eu uso no onbefore e checo e retorno false, dessa forma também evita múltiplas chamadas para o servidor. Obrigado!
eaglei22
A resposta aceita retornou indefinida ou nula. Isso funcionou perfeitamente. Obrigado!
Alex
8

Verifique se um modal está aberto

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

Para anexar um ouvinte de evento

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

Bootstrap 2, 3 Verifique se qualquer modal está aberto na página:

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

versão compatível Bootstrap 2, 3, 4+

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

Apenas Bootstrap 4+

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

fonte
3
Estou usando o Bootstrap 4.1.3e ele adiciona showclasse em vez de in.
Arif Hussain
4 
$("element").data('bs.modal').isShown

não funcionará se o modal não tiver sido mostrado antes. Você precisará adicionar uma condição extra:

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

então a resposta levando em consideração a primeira aparição:

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

Você também pode usar

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

No bootstrap-modal.js v2.2.0:

( $('element').data('modal') || {}).isShown
Ricardo
fonte
Resposta testada, créditos originais para a resposta aceita
Ricardo
2
Por que isso foi rejeitado? Era exatamente o que eu precisava
Rachel Edge
0

Por que complicar as coisas quando isso pode ser feito com jQuery simples como seguir.

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