Desea cambiar el color del botón Enviar después de la verificación del correo electrónico y la casilla de verificación marcada. Se agregaron oyentes en los cambios y funcionan bien. Pero no tengo idea de cómo averiguar cuándo sucederán estos eventos para iniciar la función, qué cambiará el color del botón de envío.
``` https://jsfiddle.net/nvologdins/brfj2xk1/ ```Aquí hay un ejemplo básico de cómo hacer esto.
También cambié un poco la lógica para actualizar los valores si el usuario los cambia nuevamente. - @Ultimater también mencionó esto.
function setupButton() { if (validEmail && validCheckbox) { // add/show/enable submit button or simply change the color button.style.color = "red"; } else { // remove/hide/disable submit button revert the changes button.style.color = ""; } } form.input.addEventListener('input', (event)=>{ validEmail = emailRegex.test(event.target.value); setupButton(); }) form.checkbox.addEventListener('change', (event)=>{ validCheckbox = event.target.checked; setupButton(); })También sugeriría un método diferente para validar el formulario utilizando la API de validación de restricciones .
Cada elemento tiene una verificación de validez a la que se puede acceder fácilmente en el elemento del formulario usando formElement.checkValidity() y devuelve verdadero/falso si todos los campos (requeridos) dentro del formulario están llenos con valores válidos.
<form oninput="this.querySelector('#submitButton').disabled = !this.checkValidity();" onsubmit="event.preventDefault(); console.log('Submit prevented but the form seems to be valid.'); return false;"> <fieldset> <label for="newslettermail">E-Mail</label> <!-- you could also define a more specific pattern on the email input since email would allow foo@bar as valid mail --> <input type="email" id="newslettermail" required> </fieldset> <fieldset> <input type="checkbox" id="newsletterAcceptTos" required> <label for="newsletterAcceptTos">I accept the Terms of Service</label> </fieldset> <fieldset> <label for="textFieldWithPattern">Enter <strong>foo</strong> or <strong>bar</strong></label> <input type="text" id="textFieldWithPattern" pattern="^(foo|bar)$" required> </fieldset> <button type="submit" id="submitButton" disabled>Submit</button> <button type="submit">Force submit (will show errors on invalid input)</button> </form>Usando esto, el navegador por sí mismo verifica los valores si contienen un valor válido.
input[type=email] con el indicador requerido debe contener una dirección de correo válida.input con requerido y un patrón debe contener un valor que coincida con la expresión regular del atributo de patrón.No es necesario crear variables adicionales y escuchar en dos elementos de formulario por separado ... Puede verificar todo y actualizar en consecuencia solo escuchando el elemento de form
let form = document.querySelector('form'); let input = document.getElementById('input'); let checkbox = document.getElementById('checkbox'); let submit = document.getElementById('button'); const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ form.addEventListener('change', (event) => { if (checkbox.checked && emailRegex.test(input.value)) { submit.style.color = "red"; } else { submit.style.color = "black" } }) //Update input.addEventListener('input', () => { const changeEvent = new Event('change'); form.dispatchEvent(changeEvent) }) <form class="main__emailAndTerms emailAndTerms"> <div class="emailAndTerms__email"> <input type="text" id="input" placeholder="Type your email address here..."> <label class="emailAndTerms__terms">I agree to <a href="#"><span class="terms__link">terms of service</span></a> <input type="checkbox" class="terms__checkbox" id="checkbox"> <span class="terms__checkbox_custom"></span> </label> <button type="submit" class="email__submitButton" id="button">Submit</button> </div> </form>