Quería verificar correctamente la dirección de correo electrónico ingresada con una función de Javascript como esta:
function validation() { let form = document.getElementById('form') let email = document.getElementById('email').value let text = document.getElementById('text') let pattern = "/^(([^<>()[\\]\\\\.,;:\\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,}))$/" if (email.match(pattern)) { form.classList.add('valid') form.classList.remove('invalid') text.innerHTML = "Valid" text.style.color = '#00ff00' } else { form.classList.remove('valid') form.classList.add('invalid') text.innerHTML = "Not valid" text.style.color = '#ff0000' } if (email == '') { form.classList.remove('valid') form.classList.remove('invalid') text.innerHTML = "" text.style.color = '#00ff00' } } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="form"> <div class="form-group"> <label for="email" class="col-sm-2 control-label">Email</label> <input type="email" name="email" class="form-control" id="email" placeholder="Enter your email" onkeydown="validation()"> <span id="text"></span> </div> </form> Ahora llama a la función de validation() correctamente y muestra el mensaje No válido si el usuario ha ingresado una dirección de correo electrónico que no está validada.
Pero el problema surge cuando el usuario intenta corregir su dirección de correo electrónico e ingresa un correo electrónico válido, pero el mensaje No válido aún aparece en la página debido a la última dirección de correo electrónico incorrecta.
Entonces, ¿cómo puedo ocultar correctamente este mensaje cuando el usuario ingresa un correo electrónico válido por segunda vez?
Prueba este código,
let pattern = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i; // true if okay otherwise false. pattern.test(email);Gracias.
Si está buscando una validación de correo electrónico estándar, el mensaje no válido seguirá apareciendo porque no es válido de acuerdo con su patrón . Ver más patrones regulares de correo electrónico en diferentes preguntas .
function validation() { let email = document.getElementById('email').value let yourPattern = "/^(([^<>()[\\]\\\\.,;:\\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,}))$/" let anotherPattern = /\S+@\S+\.\S+/; console.log("is yourPattern valid?", !!email.match(yourPattern)); console.log("is anotherPattern valid?", !!email.match(anotherPattern)); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="form"> <input type="email" name="email" class="form-control" id="email" placeholder="Enter your email" onkeydown="validation()"> </form>Tal vez use <input type="email" required> de HTML5 para la validación. Si necesita realizar más pruebas en JS, puede hacerlo, pero esta es una forma más agradable de hacerlo y obtiene mensajes incorporados.
Sin embargo, una nota adicional sobre la validación .
const form = document.querySelector('form'); form.addEventListener('submit', handleSubmit); function handleSubmit(e) { e.preventDefault(); const data = new FormData(form); console.log(data.get('email')); } input[type="email"]:not(:placeholder-shown):invalid { border-color: red; } <form> <input name="email" placeholder="Add an email" type="email" required> <button type="submit">Submit</button> </form>