javascript - 如果验证失败则禁用提交按钮

Question

如果下面的所有三个验证规则都失败，我想禁用我的提交按钮，否则禁用 false。任何帮助

<script>
  const form = document.getElementById('signup-form');
  let name = document.getElementById('name');
  let email = document.getElementById('email');
  let password = document.getElementById('password');
  let button = document.getElementById("signup-button");
  form.addEventListener('keyup', (e) => {
    e.preventDefault();
    checkValidation();
  });

  function checkValidation() {
    let nameValue = name.value.trim();
    let emailValue = email.value.trim();
    let passwordValue = password.value.trim();
    let emailValidate = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
    if (nameValue == "" || nameValue == null) {
      document.getElementById('name-error').style.display = 'block';
      document.getElementById('name-error').innerText = "Name Cannot be blank";
    } else {
      document.getElementById('name-error').style.display = 'none';
    }
    if (emailValue == "" || emailValue == null) {
      document.getElementById('email-error').style.display = 'block';
      document.getElementById('email-error').innerText = "Email Cannot be blank";
    } else if (!emailValidate.test(emailValue)) {
      document.getElementById('email-error').style.display = 'block';
      document.getElementById('email-error').innerText = "Please Enter a Valid email";
    } else {
      document.getElementById('email-error').style.display = 'none';

    }
    if (passwordValue == "" || passwordValue == null) {
      document.getElementById('password-error').style.display = 'block';
      document.getElementById('password-error').innerText = "Password Cannot be blank";

    } else {
      document.getElementById('password-error').style.display = 'none';
    }
  }
</script>

现在我想禁用我的提交按钮？如何实现

Answer 1

在该函数中，初始化一个变量，将 isValid 初始化为 true。

在检查中，如果任何检查失败，请将 isValid 设置为 false。

并在函数底部添加一个条件以启用或禁用“提交”按钮。我提供了示例代码供您引用。

if (isValid === true) {
  // Enable the submit button
}
else {
  // Enable the submit button
}