How to validate multiple emails inside <ul> using Javascript?-CodePudding

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>[email protected]</p><button class="delete">delete</button>
        </li>
        <li class="delete">
         <p>[email protected]</p><button class="delete">delete</button>
        </li>
       </ul>
       <button onclick="checkEmail()">Validate</button>

CodePudding user response：

// 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;
}

CodePudding user response：

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>[email protected]</p><button class="delete">delete</button>
  </li>
  <li class="delete">
    <p>[email protected]</p><button class="delete">delete</button>
  </li>
</ul>
<button onclick="checkEmail()">Validate</button>

CodePudding user response：

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>[email protected]</p><button class="delete">delete</button>
  </li>
  <li class="delete">
    <p>[email protected]</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>

CodePudding user response：

Code was almost working, except you forgot to add an innerText in elements[index]

function checkEmail() {
    // Get all nodes with querySelectorAll
        var elements = document.getElementById("ul-emaillist").getElementsByTagName("p");
   
    
    // Log values
    
        for (let index = 0; index < elements.length;   index) {
            const email = elements[index].innerText;
            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>[email protected]</p><button class="delete">delete</button>
  </li>
  <li class="delete">
   <p>[email protected]</p><button class="delete">delete</button>
  </li>
</ul>
<button onclick="checkEmail()">Validate</button>