I am trying to validate multiple email adresses but I can't seem to get it to work. I am new to Javascript and I searched the internet for solutions but to no avail.
I can print the email adresses but in the validation it always returns false what am I doing wrong?
The idea is that users can add email adresses to an and a delete button when they want to remove an address. I am trying to validate the emails when a submit button gets pressed.
The if-statement doesn't work inside and outside the for loop
What I have:
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>
You need to set the output of validEmail(email) to a variable, and check that on the if(!validEmail()) line, like so:
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 to select all li elements, then you can loop through and retrieve the email text inside the p element. Like this:
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>