Javascript: функция, которая ссылка на кнопку не работает

Question

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

<span class="error">*</span>
<label for="email"><span class="register">E-mail</span></label>&nbsp;&nbsp;&nbsp;&nbsp;<span id="emailInfo"></span>
<input type="email" name="email" id="email" required="required" onkeyup="emailCheck()">

<button type="submit" id="button" style="vertical-align:middle" onclick="buttonCheck()"><span>Submit</span></button>

<script>
function emailCheck() {
            var emailReg=/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            var address=document.getElementById("email").value;

            if (!emailReg.test(address)) {
                document.getElementById("emailInfo").innerHTML="<font color='red'>The email address is available";
                document.getElementById("button").disabled=true;
            } else {
                document.getElementById("emailInfo").innerHTML="";
                document.getElementById("button").disabled=false;
            }
        }

function buttonCheck() {
            if (document.getElementById("button").disabled) {
                alert("Please double check your info")
            }
        }
</script>

Кнопка фактически отключена.Однако, когда я нажал кнопку, ничего не произошло.

Answer 1

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

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

Лучший подход - это всегда держать кнопку включенной и предупреждать пользователя онажмите или удалите / отключите кнопку, но оставьте над ней сообщение, объясняющее почему кнопка отключена.

Answer 2

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

function emailCheck() {
            var emailReg  = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
            var address=document.getElementById("email").value;
           
            if (emailReg.test(address)) {
                document.getElementById("emailInfo").innerHTML="<font color='red'>The email address is available";
                document.getElementById("button").disabled=false;
            } 
            else {
               document.getElementById("emailInfo").innerHTML="";
               
           }
        }

function buttonCheck() {
        var emailReg  = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        var address=document.getElementById("email").value;
        
        if(!emailReg.test(address)){
            document.getElementById("button").disabled=true;
            alert("Please double check your info");
        }
      
}

<span class="error">*</span>
<label for="email"><span class="register">E-mail</span></label>&nbsp;&nbsp;&nbsp;&nbsp;<span id="emailInfo"></span>
<input type="email" name="email" id="email" required="required" onkeyup="emailCheck()">

<button type="submit" id="button" style="vertical-align:middle" onclick="buttonCheck()"><span>Submit</span></button>

Answer 3

Вы не можете захватить событие click для кнопки, которая отключена.Что вы можете сделать, это попытаться «смоделировать» внешний вид отключенной кнопки с помощью CSS, а затем зафиксировать событие щелчка.

Например, вы можете создать класс disabled в CSS:

.disabled {
      background-color: #DDD;
      color: #999;
}

Вот полный пример использования вашего кода:

function emailCheck() {
  var emailReg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
  var address = document.getElementById("email").value;

  if (!emailReg.test(address)) {
    document.getElementById("emailInfo").innerHTML = "<font color='red'>The email address is available";
    document.getElementById("button").classList.add("disabled");
  } else {
    document.getElementById("emailInfo").innerHTML = "";
    document.getElementById("button").classList.remove("disabled");
  }
}

function buttonCheck() {
  if (document.getElementById("button").classList.contains('disabled')) {
    alert("Please double check your info")
  }
}

.disabled {
  background-color: #DDD;
  color: #999;
}

<span class="error">*</span>
<label for="email"><span class="register">E-mail</span></label>&nbsp;&nbsp;&nbsp;&nbsp;<span id="emailInfo"></span>
<input type="email" name="email" id="email" required="required" onkeyup="emailCheck()">

<button type="submit" id="button" style="vertical-align:middle" onclick="buttonCheck()"><span>Submit</span></button>