Form validation (multiple input type) with Vanilla JavaScript for empty and invalid email-CodePudding

This code only works for empty email input but not for invalid email. I want to show different error-text for each problem. Is it possible to do it with vanilla javascript? Or is there any fault in my javascript code?

I haven't added the error text for invalid email input yet. Help, please. Thanks in advance.

const form = document.querySelector('form');
const inputs = document.querySelectorAll('input');
const inputEmail = document.querySelector('.input-email')

function validateEmail (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(String(email).toLowerCase());
}
form.addEventListener('submit',(e)=>{
    e.preventDefault();
    for(let i=0;i<inputs.length;i  ){
        if(!inputs[i].value){
            inputs[i].parentElement.classList.add('error');
        }else{
            inputs[i].parentElement.classList.remove('error');
            if(inputEmail){
                if(validateEmail(inputEmail.value)){
                    inputEmail.parentElement.classList.remove('error');
                }else{
                    inputEmail.parentElement.classList.remove('error');
                }
            }
        }
    }
})

form {
  background: white;
  box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.247);
  padding: 1.5rem;
  border-radius: 0.5rem;
}
.infield {
  position: relative;
  margin-bottom: 1rem;
}
input {
  width: 100%;
  height: 3rem;
  border: 1px solid rgba(128, 128, 128, 0.425);
  border-radius: 0.3rem;
  padding-left: 1rem;
}
.infield.error input {
  border: 1px solid hsl(0, 100%, 74%);
}
input:active,
input:focus {
  border: 1px solid hsl(247, 40%, 68%);
  outline: none;
}
::placeholder {
  color: hsl(249, 10%, 26%);
  font-weight: 600;
}
.infield.error ::placeholder {
  color: hsl(0, 100%, 74%);
}
.error-image {
  display: none;
  position: absolute;
  top: 0.8rem;
  right: 1rem;
}
.infield.error .error-image {
  display: block;
}
.error-text {
  display: none;
  color: hsl(0, 100%, 74%);
  font-size: 0.7rem;
  font-style: italic;
  text-align: right;
  margin: 0.3rem 0;
}
.infield.error .error-text {
  display: block;
}
form button {
  width: 100%;
  height: 3rem;
  border: none;
  border-radius: 0.3rem;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  color: white;
  background: hsl(154, 59%, 51%);
  box-shadow: 0 4px 0 0 hsl(154, 51%, 48%);
  cursor: pointer;
}
form button:hover {
  opacity: 0.8;
}
#terms {
  font-size: 0.7rem;
  font-weight: 500;
  color: hsl(246, 25%, 77%);
  margin: 1rem;
  text-align: center;
}
#terms a {
  font-weight: 700;
  text-decoration: none;
  color: hsl(0, 100%, 74%);
}

 <form action="#" id="form">
        <div >
          <input type="text" placeholder="First Name">
          <img src="./images/icon-error.svg" alt="icon-error" >
          <p >First Name cannot be empty</p>
        </div>
        <div >
          <input type="text" placeholder="Last Name">
          <img src="./images/icon-error.svg" alt="icon-error" >
          <p >Last Name cannot be empty</p>
        </div>
        <div >
          <input type="text" placeholder="Email Address" >
          <img src="./images/icon-error.svg" alt="icon-error" >
          <p >Looks like this is not an email</p>
        </div>
        <div >
          <input type="password" placeholder="Password">
          <img src="./images/icon-error.svg" alt="icon-error" >
          <p >Password cannot be empty</p>
        </div>
        <button type="submit">Claim your free trial</button>
        <p id="terms">By clicking the button, you are agreeing to our <a href="#">Terms and Services</a></p>
      </form>

CodePudding user response：

An easy solution to this problem is to let the HTML handle this, you can change your email input to this:

<input type="email" required placeholder="Email Address" >

This will handle both scenarios and display a message.

CodePudding user response：

By putting your E-mail check inside the loop, any input after the E-mail input will override the changes.

Moved your E-mail check outside the loop, and added the error icon when not valid:

const form = document.querySelector('form');
const inputs = document.querySelectorAll('input');
const inputEmail = document.querySelector('.input-email')

function validateEmail (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(String(email).toLowerCase());
}
form.addEventListener('submit',(e)=>{
    e.preventDefault();
    for(let i=0;i<inputs.length;i  ){
        if(!inputs[i].value){
            inputs[i].parentElement.classList.add('error');
        }else{
            inputs[i].parentElement.classList.remove('error');
        }
    }
    if(inputEmail){
        if(validateEmail(inputEmail.value)){
            inputEmail.parentElement.classList.remove('error');
        }else{
            inputEmail.parentElement.classList.add('error');
        }
    }
})

form {
  background: white;
  box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.247);
  padding: 1.5rem;
  border-radius: 0.5rem;
}
.infield {
  position: relative;
  margin-bottom: 1rem;
}
input {
  width: 100%;
  height: 3rem;
  border: 1px solid rgba(128, 128, 128, 0.425);
  border-radius: 0.3rem;
  padding-left: 1rem;
}
.infield.error input {
  border: 1px solid hsl(0, 100%, 74%);
}
input:active,
input:focus {
  border: 1px solid hsl(247, 40%, 68%);
  outline: none;
}
::placeholder {
  color: hsl(249, 10%, 26%);
  font-weight: 600;
}
.infield.error ::placeholder {
  color: hsl(0, 100%, 74%);
}
.error-image {
  display: none;
  position: absolute;
  top: 0.8rem;
  right: 1rem;
}
.infield.error .error-image {
  display: block;
}
.error-text {
  display: none;
  color: hsl(0, 100%, 74%);
  font-size: 0.7rem;
  font-style: italic;
  text-align: right;
  margin: 0.3rem 0;
}
.infield.error .error-text {
  display: block;
}
form button {
  width: 100%;
  height: 3rem;
  border: none;
  border-radius: 0.3rem;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  color: white;
  background: hsl(154, 59%, 51%);
  box-shadow: 0 4px 0 0 hsl(154, 51%, 48%);
  cursor: pointer;
}
form button:hover {
  opacity: 0.8;
}
#terms {
  font-size: 0.7rem;
  font-weight: 500;
  color: hsl(246, 25%, 77%);
  margin: 1rem;
  text-align: center;
}
#terms a {
  font-weight: 700;
  text-decoration: none;
  color: hsl(0, 100%, 74%);
}

<form action="#" id="form">
        <div >
          <input type="text" placeholder="First Name">
          <img src="./images/icon-error.svg" alt="icon-error" >
          <p >First Name cannot be empty</p>
        </div>
        <div >
          <input type="text" placeholder="Last Name">
          <img src="./images/icon-error.svg" alt="icon-error" >
          <p >Last Name cannot be empty</p>
        </div>
        <div >
          <input type="text" placeholder="Email Address" >
          <img src="./images/icon-error.svg" alt="icon-error" >
          <p >Looks like this is not an email</p>
        </div>
        <div >
          <input type="password" placeholder="Password">
          <img src="./images/icon-error.svg" alt="icon-error" >
          <p >Password cannot be empty</p>
        </div>
        <button type="submit">Claim your free trial</button>
        <p id="terms">By clicking the button, you are agreeing to our <a href="#">Terms and Services</a></p>
      </form>