AJAX: отключение кнопки отправки, пока поле имени пользователя не будет заполнено электронной почтой

Question

Моя страница входа состоит из трех вещей:

1. Поле для имени пользователя
2. Поле для пароля
3. Кнопка отправки

Этот код отключит кнопку отправки, если поле имени пользователя не пустое.

Я хочу отключить кнопку отправки, пока поле имени пользователя не будет заполнено электронным письмом.

Кроме того, после того, как что-то написано вполе имени пользователя и очистить его, кнопка отправки не отключает себя.Я хочу, чтобы кнопка подтверждения отключалась после очистки поля имени пользователя.

$(':input[type="submit"]').prop('disabled', true);
 $('input[type="email"]').keyup(function() {
    if($(this).val() != '<!-- not sure what to put here -->') {
       $(':input[type="submit"]').prop('disabled', false);
    }
 });

Answer 1

Чистое решение js для этого будет:

document.querySelector("input[type=email]").onkeyup = function(){
let reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
(this.value.length==0 || reg.test(this.value)==false)?document.querySelector("input[type=submit]").setAttribute("disabled","disabled"):document.querySelector("input[type=submit]").removeAttribute("disabled")
}

<form>
<input type="email">
<input type="password">
<input type="submit" disabled>
</form>

Проверка длины входного значения или шаблона ввода при каждом отпускании клавиши.Если длина равна нулю или шаблон не совпадает, тогда атрибут disabled отключается.Если нет, то он вообще удаляет отключенный атрибут.

Answer 2

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

let button = $(':input[type="submit"]');
button.prop('disabled', true);
$('input[type="email"]').keyup(function() {
  if(validateEmail($(this).val())) {
     button.prop('disabled', false);
  }
  else{
    button.prop('disabled', true);
  }
});
 
function validateEmail(email) {
  var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(String(email).toLowerCase());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="email"/>
<input type="submit" value="Submit"/>