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>
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
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
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');
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){
...
}
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
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 )
});
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