Quiero deshabilitar mi botón de envío si las tres reglas de validación a continuación fallan; de lo contrario, deshabilite falso. Alguna ayuda
<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>¿Ahora quiero deshabilitar mi botón de enviar? Cómo puede lograrse
Puedes agregar una bandera como esta:
<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>En esa función, inicialice una variable, digamos isValid a true .
En las comprobaciones, si falla alguna, establezca isValid en false .
Y en la parte inferior de la función, agregue una condición para habilitar o deshabilitar el botón Enviar. Estoy proporcionando un código de muestra para su referencia.
if (isValid === true) { // Enable the submit button } else { // Enable the submit button }