Estoy tratando de validar varias direcciones de correo electrónico, pero parece que no puedo hacer que funcione. Soy nuevo en Javascript y busqué soluciones en Internet, pero fue en vano.
Puedo imprimir las direcciones de correo electrónico pero en la validación siempre devuelve falso ¿qué estoy haciendo mal?
La idea es que los usuarios puedan agregar direcciones de correo electrónico a un botón y eliminar cuando deseen eliminar una dirección. Estoy tratando de validar los correos electrónicos cuando se presiona un botón de envío.
La instrucción if no funciona dentro y fuera del ciclo for
Lo que tengo:
function checkEmail() { // Get all nodes with querySelectorAll var elements = document.getElementById("ul-emaillist").getElementsByTagName("p"); // Log values elements.forEach(element => console.log(element.innerText)); for (let index = 0; index < elements.length; ++index) { const email = elements[index]; validEmail(email); } if (!validEmail()){ console.log("email klopt niet"); return false; }else{ return true; } } function validEmail(email) { var re = /^(([^<>()\[\]\\.,;:\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,}))$/; return re.test(email); }; <ul id="ul-emaillist"> <li class="delete"> <p>test@hotmail.com</p><button class="delete">delete</button> </li> <li class="delete"> <p>testperson2@gmail.com</p><button class="delete">delete</button> </li> </ul> <button onclick="checkEmail()">Validate</button>Debe establecer la salida de validEmail(email) en una variable y comprobarlo en la línea if(!validEmail()) , así:
function checkEmail() { // Get all nodes with querySelectorAll var elements = document.getElementById("ul-emaillist").getElementsByTagName("p"); elements = [ ...elements ] // Log values // elements.forEach(element => console.log(element.innerText)); let valid = false; let notvalid = false; for (let index = 0; index < elements.length; index++) { const email = elements[index].innerHTML; if (validEmail(email)) { valid = true; } if (!valid) { console.log("bad email: " + email); notvalid = true; } else { console.log("good email: " + email); valid = true; } } // use `valid` to check if ANY email is good // use `notvalid` to check if ALL email's are good if (valid) { return true; } return false; } function validEmail(email) { var re = /^(([^<>()\[\]\\.,;:\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,}))$/; return re.test(email); }; <ul id="ul-emaillist"> <li class="delete"> <p>test@hotmail.com</p><button class="delete">delete</button> </li> <li class="delete"> <p>testperson2@gmail.com</p><button class="delete">delete</button> </li> </ul> <button onclick="checkEmail()">Validate</button>// Validate if all emails in the list are valid function checkEmails() { const elements = document.getElementById('ul-emaillist').getElementsByTagName('p'); let isValidEmails = true; elements.forEach(element => { const email = element.innerText; // will result in false if at least one email is invalid isValidEmails = isValidEmails && validEmail(email); }); return isValidEmails; }Use querySelectorAll para seleccionar todos los elementos li , luego puede recorrer y recuperar el texto del correo electrónico dentro del elemento p . Como esto:
function checkEmail() { const elements = document.querySelectorAll("li.delete"); elements.forEach((element) => { const email = element.querySelector("p").textContent; if (isValidEmail(email)) { alert(`${email} VALID`) } else { alert(`${email} INVALID`) } }) } function isValidEmail(email) { var re = /^(([^<>()\[\]\\.,;:\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,}))$/; return re.test(email); }; <ul id="ul-emaillist"> <li class="delete"> <p>test@hotmail.com</p><button class="delete">delete</button> </li> <li class="delete"> <p>testperson2@gmail.com</p><button class="delete">delete</button> </li> <li class="delete"> <p>testperson2.com</p><button class="delete">delete</button> </li> </ul> <button onclick="checkEmail()">Validate</button>