В jQuery отключите кнопку отправки в функции keyup - PullRequest
Новая
       8

В jQuery отключите кнопку отправки в функции keyup

0 голосов
/ 23 января 2019

Мне нужно выполнить поиск определенных почтовых клиентов на входе, если почтовый клиент совпадает, мне нужно отключить кнопку, которая отправляет форму. 

 $('#Email').keyup(function(e){
    var email =  $('#Email');
    var emailValue = $('#Email').val();
    var invalidEmails = ['gmail.com', 'yahoo.com', 'hotmail.com', 'yahoo.com', 'yahoo.co.in', 'aol.com', 'abc.com']

    for(var i = 0; i <= invalidEmails.length; i++){
      if( emailValue.toLowerCase().indexOf( invalidEmails[i]) >= 0){
        $('.corporativo-invalid').show();
        email.toggleClass('invalid-email');
        $('#register-button').prop("disabled",true);
        //e.preventDefault();
      } else {
        $('#register-button').prop("disabled",false);
      }
    }
  });

Строка, которая, кажется, не соответствуетработа такая: 

$('#register-button').prop("disabled",true);

Что меня смущает, так это то, что если вместо события keyup я выполняю событие нажатия кнопки, с той же функцией, то это работает?Этот пример работает: 

$('#register-button').click(function(e){
    var email =  $('#Email');
    var emailValue = $('#Email').val();
    var invalidEmails = ['gmail.com', 'yahoo.com', 'hotmail.com', 'yahoo.com', 'yahoo.co.in', 'aol.com', 'abc.com']

    for(var i = 0; i <= invalidEmails.length; i++){
      if( emailValue.toLowerCase().indexOf( invalidEmails[i]) >= 0){
        $('.corporativo-invalid').show();
        email.toggleClass('invalid-email')
        $('#register-button').prop("disabled",true);
        e.preventDefault();
      } else {
        $('#register-button').prop("disabled",false);
      }
    }
  });

Но мне нужно использовать событие keyup.

HTML: 

<form class="needs-validation" id="register-form" novalidate>
    <a href="javascript:history.back()" class="breadcrumbs small"><span class="back">‹</span> Volver atrás</a>
    <h1>Regístrate</h1>
    <div>
        <input type="email" class="form-control" id="Email" placeholder="Correo eléctronico" required>
        <div class="invalid-feedback correo-inavlid">Por favor, introduce un correo electrónico</div>
        <div class="corporativo-invalid">Por favor, introduce un correo corporativo</div>
    </div>
    <div>
        <input type="password" class="form-control" id="loginPassword" placeholder="Contraseña" required>
        <div class="invalid-feedback">Por favor, introduce una contraseña</div>
    </div>
    <div class="d-sm-flex text-center justify-content-between align-items-center">
        <button class="btn login-form-button" type="submit" id="register-button">QUIERO REGISTRARME <span>›</span></button>
        <p class="small">¿Ya estás registrado? <a href="login.html">Inicia sesión <span>›</span></a></p>
    </div>
</form>

1 Ответ

0 голосов
/ 24 января 2019

попробуйте изменить атрибут type = "submit" на type = "button" 

if( emailValue.toLowerCase().indexOf( invalidEmails[i]) >= 0){
    $('.corporativo-invalid').show();
    email.toggleClass('invalid-email')
    $('#register-button').attr("type","button");
  } else {
    $('#register-button').attr("type","submit");
  }
...