My Password (form) verification and validation with JS is not working

Question

I want to verify and validate the password in a form in HTML, and insert alerts in Front if necessary ("eg. Password not long enough"), which will serve as a "new user" form for a website. I want to start by understanding my mistake for the "password" verification and validation, and then validate the form once everything is correct.

I currently have the following in HTML:

<form id="formNouveau">
                <div>
                  <div id="msgPseudo"></div>
                  <label for="pseudo">Pseudo</label>
                  <br>
                  <input type="text" name="pseudo" id="pseudo" required>
                </div>
                <div>
                  <div id="msgEmail"></div>
                  <label for="email">Email</label>
                  <br>
                  <input type="email" name="email" id="email" required>
                </div>
                <div>
                  <div id="msgPass"></div>
                  <label for="password">Mot de passe</label>
                  <br>
                  <input type="password" name="password" id="password" placeholder="*******" required>
                </div>
                <div>
                  <div id="msgPassRep"></div>
                  <label for="passwordRepeat">Repeat your password</label>
                  <br>
                  <input type="password" name="passwordRepeat" id="passwordRepeat" placeholder="*******" required>
                </div>
                <div>
                  <input type="submit" name="submit" id="submit" value="Create an account">
                </div>
              </form>

and the code in JS, with a focus on the password verification and validation:

function valideForm(e) {
  e.preventDefault();

  var valPassword = document.getElementById("password").value;

if((valPassword.length < 8)) {
  alert("Password should be at least 8 characters")
}
else if((valPassword.length > 30)) {
  alert("Password should not exceed 30 characters")
}
else if (!/[A-Z]/.test(valPassword)) {
  alert("Password should have at least 1 uppercase")
}
else if (!/[a-z]/.test(valPassword)) {
  alert("Password should have at least 1 lowercase")
}
else if (!/[0-9]/.test(valPassword)) {
 alert("Password should have at least 1 number")
}
else if (!/(?=.[$#%£&§@])/.test(valPassword)) {
  alert("Password should have at least 1 special character")
}
else   {
  alert("Password is correct");
    return false;
}
  
}

document.getElementsByTagName('form')[0].addEventListener('submit', valideForm);

The alert messages appear only when the previous alert was displayed, and not all together. For example I will be missing an uppercase and a special character in my password, the alert will only display "Password should have at least 1 uppercase". Once I have added the uppercase, then will the other alert display "Password should have at least 1 special character."

What do you think?

Thank you!

What is not working ? can you describe in more details where you're stuck ? — Aime Aine
– Aime Aine, Commented May 19, 2021 at 22:20
The alert messages appear only when the previous alert was displayed, and not all together. For example I will be missing an uppercase and a special character in my password, the alert will only display "Password should have at least 1 uppercase". Once I have added the uppercase, then will the other alert display "Password should have at least 1 special character." — Helene Lansiaux
– Helene Lansiaux, Commented May 19, 2021 at 22:34

kannajs · Accepted Answer · 2021-11-04 01:39:51Z

Is this what you are looking for?

const password = document.querySelector('#password');
const errorList = document.querySelector('.errorList');
const rules = [
 { message:'At least 1 lower letter.', regex:/[a-z]+/ },
 { message:"At least 1 capital letter.",  regex:/[A-Z]+/ },
 { message:"At least 4 characters", regex:/.{4,}/ },
 { message:"At least 1 number", regex:/[0-9]+/ },
 { message:"At least 1 special character", regex:/[^A-Za-z0-9]+/ }
];

function passwordValidation (e) {
  const errors = [];
  errorList.innerHTML = '';
  
  for (let condition of rules) {
    if (!condition.regex.test(e.target.value)) {
       errors.push(condition.message)
    }
  }

  if (errors.length !== 0) {
    for (let i = 0; i < errors.length; i++) {
     const errorListItem = document.createElement('li')
     errorList.appendChild(errorListItem)
     errorListItem.innerHTML = errors[i]
    }
    
    return {
      valid: false,
      errors
    }
  }

   return {
      valid: true,
      errors
    }
}

password.addEventListener('input', passwordValidation);

<input type="password" id="password" placeholder="****" />

<ul class="errorList"></ul>

omidh · Accepted Answer · 2021-05-19 22:42:10Z

You can keep all validation errors in an array then alert them to the user at the end:

function valideForm(e) {
  e.preventDefault();

  var valPassword = document.getElementById("password").value;
  var errors = [];
if (!valPassword) {
  alert("Password is empty");
}
if((valPassword.length < 8)) {
  errors.push("Password should be at least 8 characters")
}
if((valPassword.length > 30)) {
  errors.push("Password should not exceed 30 characters")
}
if (!/[A-Z]/.test(valPassword)) {
  errors.push("Password should have at least 1 uppercase")
}
if (!/[a-z]/.test(valPassword)) {
  errors.push("Password should have at least 1 lowercase")
}
if (!/[0-9]/.test(valPassword)) {
 errors.push("Password should have at least 1 number")
}
if (!/(?=.[$#%£&§@])/.test(valPassword)) {
  errors.push("Password should have at least 1 special character")
}

  if (errors.length) {
    alert(errors);
  }
}

document.getElementsByTagName('form')[0].addEventListener('submit', valideForm);

Collectives™ on Stack Overflow

My Password (form) verification and validation with JS is not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related