jquery validate를 사용할 수 있도록 부트스트랩 모달이 열려 있는지 확인하는 방법은 무엇입니까?

jquery validate를 사용할 수 있도록 부트스트랩 모달이 열려 있는지 확인하는 방법은 무엇입니까?

모달이 열려 있는 경우에만 유효성 검사를 해야 합니다. 왜냐하면 모달을 열고 닫으면 모달을 여는 버튼을 누르면 jquery validation이 되지만 모달이 기각되어 표시되지 않기 때문입니다.

그래서 모달이 열려 있으면 재쿼리를 조정해서 검증을 하고 싶은데 가능한가요?

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

// For Bootstrap 5
$('#myModal').hasClass('show');

// For Bootstrap 3 and 4, to avoid the race condition @GregPettit mentions, one can use:

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

// or, with the optional chaining operator (?.)
$("#myModal").data('bs.modal')?._isShown    // Bootstrap 4
$("#myModal").data('bs.modal')?.isShown     // Bootstrap <= 3

Twitter Bootstrap Modal - Is Show 에서 논의된 바와 같이.

모달이 아직 열리지 않았을 때,.data('bs.modal')돌아온다undefined, 그 때문에|| {}- 어느 쪽이 될 것인가를isShownfals리 값undefined. 만약 당신이 엄격함에 관심이 있다면 할 수 있습니다.($("element").data('bs.modal') || {isShown: false}).isShown

jQuery를 직접 사용할 수도 있습니다.

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

사용가능

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

부트스트랩은 다음을 추가합니다.inmodal이 열려 있을 때 클래스를 열고 닫을 때 클래스

부트스트랩 2, 3 페이지에서 열려 있는 모드를 확인합니다.

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

호환 버전 부트스트랩 2, 3, 4+

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

부트스트랩 4+만

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

모달이 열렸는지 확인합니다.

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

이벤트 수신기를 첨부하려면

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

사용할 수도 있습니다.

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

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

이전에 모드를 보여주지 않았다면 작동하지 않을 것입니다.조건을 추가해야 합니다.

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

그래서 첫 등장을 고려한 답은 다음과 같습니다.

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

간단한 jQuery로 할 수 있는데 왜 일을 복잡하게 만드나요?

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

ID로 특정 모델 상태를 확인하는 JavaScript Approach입니다.

modalstate = document.getElementById('modal-id').classList.contains('show')

특정 modal-id가 열려 있으면 true로 반환됩니다.

이 코드 표시, 모달이 열려 있을 때(본체에서), 닫힐 때(result false)

var trueFalse = ($('body').hasClass('modal-open'));

bootstrap-modal.js v2.2.0의 경우:

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

이를 해결하기 위해 개인적으로 사용자 지정 글로벌 플래그를 사용하여 모달이 열렸는지 여부를 판단하고 'hidden.bs .modal'에서 재설정합니다.

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