Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

224
Vistas
Disable submit button if validation fails

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

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

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>
about 4 years ago · Juan Pablo Isaza Denunciar

0

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
}

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda