program story

부트 스트랩 모달이 열려 있는지 확인하는 방법으로 jquery validate를 사용할 수 있습니다.

inputbox 2020. 8. 17. 08:54
반응형

부트 스트랩 모달이 열려 있는지 확인하는 방법으로 jquery validate를 사용할 수 있습니다.


모달이 열려있는 경우에만 유효성 검사를해야합니다. 왜냐하면 모달을 연 다음 닫으면 모달을 여는 버튼을 누르면 jquery 유효성 검사를 수행하기 때문에 작동하지 않습니다. 모달이 해제 되었기 때문에 표시됩니다.

그래서 모달이 열려 있으면 jquery를 광고하여 유효성을 검사하고 싶습니다. 가능합니까?

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

@GregPettit에서 언급 한 경쟁 조건을 피하기 위해 다음을 사용할 수 있습니다.

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

Twitter Bootstrap Modal-IsShown 에서 논의한 대로 .

모달이 아직 열리지 않으면을 .data('bs.modal')반환 undefined하므로 || {}- isShown값이 (거짓) 값이 undefined됩니다. 엄격하다면 할 수 있습니다.($("element").data('bs.modal') || {isShown: false}).isShown


당신이 사용할 수있는

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

Bootstrap adds the in class when the modal is open and removes it when closed


You can also directly use jQuery.

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

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

won't work if the modal hasn't been shown before. You will need to add an extra condition:

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

so the answer taking into account first appearance:

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

Check if a modal is open

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

To attach an event listener

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

Bootstrap 2,3,4 Check is any modal open in page :

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

compatible version Bootstrap 2,3,4, 4.1+

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

Only Bootstrap 4.1+

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

On bootstrap-modal.js v2.2.0:

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

참고URL : https://stackoverflow.com/questions/19506672/how-to-check-if-bootstrap-modal-is-open-so-i-can-use-jquery-validate

반응형