Как заставить пользователя ввести действующий адрес электронной почты и в противном случае не дать ему нажать кнопку отправки?

Question

Мне любопытно, как я могу заставить пользователя ввести действительный адрес электронной почты и, если он недействителен, не показывать кнопку отправки как активную?

вот текущий код, который у меня есть. В настоящее время, если адрес электронной почты недействителен, он показывает красную рамку, но пользователь все еще может нажать кнопку отправки.

$("button[type='submit']").on('click', function () {

        $(".error").hide();
        let hasError = false;

        let emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

        let emailAddressVal = $("#user_email").val();
        if (emailAddressVal == ''){
            $("#user_email").after('<span class="error">Please enter your email address.</span>');
            hasError = true;
        }

        else if(!emailReg.test(emailAddressVal)) {
            $("#user_email").after('<span class="error">Enter a valid email address.</span>');
            hasError = true;
        }

        //alert(emailAddressVal);

        if(hasError == true) {
            return false;
        }


    })

Здесь вводятся данные:

        <div class="col-md-3">
            <i class="fas fa-envelope fa-lg"></i>
            <label data-error="wrong" data-success="right">Enter your email</label>
            <input type="email" class="form-control validate purple-border" id="user_email">

        </div>

И вот кнопка отправки:

<button type="submit" class="btn btn-purple purple-border">Perform Frame Classification</button>

Answer 1

Вместо того, чтобы использовать событие click на кнопке отправки для проверки электронной почты, проверьте его как тип пользователя (на событие keyup) и используйте результат теста, чтобы активировать кнопку (обратите внимание, что мы начинаем с отключенной кнопкой):

$("#user_email").on('keyup', function() {
  $(".error").hide();
  let hasError = false;

  let emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

  let emailAddressVal = $(this).val();
  if (emailAddressVal == '') {
    $("#user_email").after('<span class="error">Please enter your email address.</span>');
    hasError = true;
  } 
  else if (!emailReg.test(emailAddressVal)) {
    $("#user_email").after('<span class="error">Enter a valid email address.</span>');
    hasError = true;
  }

  $('button[type="submit"]').prop('disabled', hasError);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-3">
  <i class="fas fa-envelope fa-lg"></i>
  <label data-error="wrong" data-success="right">Enter your email</label>
  <input type="email" class="form-control validate purple-border" id="user_email">

</div>


<button type="submit" class="btn btn-purple purple-border" disabled="disabled">Perform Frame Classification</button>