I want to disable my submit button if all three validation rules below fails otherwise disable false. Any help

<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>

Now I want to disable my submit button? How can it be achieved

CodePudding user response：

In that function, initialize a variable, lets say isValid to true.

In the checks, if any check fails, set isValid to false.

And at the bottom of the function, add a condition to enable or disable the Submit button. I'm providing a sample code for your reference.

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

CodePudding user response：

You can add a flag like this:

<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");
  let error = false;

  form.addEventListener('keyup', (e) => {
    e.preventDefault();
    checkValidation();
  });
if(error){
 button.setAttribute('disabled', '')
}else{
 button.removeAttribute('disabled')
}

  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";
      error = true;
    } 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";
      error = true;
    } 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";
error = true;

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