Как сделать функцию ложной в jquery, если модальный бутстрап скрыт?

Question

У меня есть модальная форма bootstrap 4 с кнопкой входа в систему. Когда я открываю модальный режим и нажимаю клавишу ввода, то loginVelidation() звонит, все работает нормально, но когда я скрываю модал загрузки, эта функция loginVelidation() работает.Но я не хочу, чтобы эта функция loginVelidation(), когда модал скрыт.

Как я могу это сделать?

Это мой код: -

$(function(){

    $('#loginModal').on('show.bs.modal', function(){
        $(document).on('keypress', function(e){
            if(e.which == 13){
                loginVelidation();
            }
        });
    });

    $('#loginModal').on('hidden.bs.modal', function(e){
    });
});


function loginVelidation(){
    alert('test');
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


 <button type="button" class="btn btn-primary modalBtn" data-toggle="modal" data-target="#loginModal">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal" id="loginModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
           <button class="btn btn-primary btn-lg" id="loginBtn" onclick="loginVelidation();">Login</button>
        </div>
        
      </div>
    </div>
  </div>

Ответ будет оценен по достоинству!

Answer 1

Вы добавляете прослушиватель событий в событие show.bs.modal. Внутри события keypress проверьте, является ли модальное значение visible и используйте === вместо двойного ==

$(function() {
  $(document).on('keypress', function(e) {
    if ($('#loginModal').is(':visible')) {
      if (e.which === 13) {
        loginVelidation();
      }
    }
  });
})

function loginVelidation() {
  alert('test');
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-primary modalBtn" data-toggle="modal" data-target="#loginModal">
    Open modal
  </button>

<!-- The Modal -->
<div class="modal" id="loginModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button class="btn btn-primary btn-lg" id="loginBtn" onclick="loginVelidation();">Login</button>
      </div>

    </div>
  </div>
</div>

Answer 2

Сначала проверьте, скрыт или виден модал, затем выполните проверку

$(function(){

    $('#loginModal').on('show.bs.modal', function(){
        $(document).on('keypress', function(e){
            if(e.which == 13 && ($("#loginModal").data('bs.modal') || {})._isShown    ){
                loginVelidation();
            }
        });
    });

    $('#loginModal').on('hidden.bs.modal', function(e){
    });
});


function loginVelidation(){
    alert('test');
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


 <button type="button" class="btn btn-primary modalBtn" data-toggle="modal" data-target="#loginModal">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal" id="loginModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
           <button class="btn btn-primary btn-lg" id="loginBtn" onclick="loginVelidation();">Login</button>
        </div>
        
      </div>
    </div>
  </div>

Надеюсь, это поможет вам.

Answer 3

Вы можете проверить, виден ли модал с помощью jQuery, как это. Имейте в виду, что on.shown.modal - это событие, которое инициируется. И не проверяет текущее состояние модала.

$(function(){
        $(document).on('keypress', function(e){
            if(e.which == 13){
              if ($('#loginModal').is(':visible')) {
                loginVelidation();
              }
            }
});
});



function loginVelidation(){
    alert('test');
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


 <button type="button" class="btn btn-primary modalBtn" data-toggle="modal" data-target="#loginModal">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal" id="loginModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
           <button class="btn btn-primary btn-lg" id="loginBtn" onclick="loginVelidation();">Login</button>
        </div>
        
      </div>
    </div>
  </div>