Javascript validate password field input

Question

i want to validate a password field with the following conditions: One uppercase character One lowercase character One number One special character Eight characters minimum If the password input is correct i want to make the pass field green if not it should be red. I tried with this code but doesnt work:

let password = document.querySelectorAll(".control-group")[3];
password.addEventListener("focusout", () => {
  let inp = password.value;
  if (
    inp.match(/[a-z]/g) &&
    inp.match(/[A-Z]/g) &&
    inp.match(/[0-9]/g) &&
    inp.match(/[^a-zA-Z\d]/g) &&
    inp.length >= 8
  ) {
    password.style.backgroundColor = "green";
  } else {
    password.style.backgroundColor = "red";
  }
});

Does this answer your question? [Regex for password must contain at least eight characters, at least one number and both lower and uppercase letters and special characters](https://stackoverflow.com/questions/19605150/regex-for-password-must-contain-at-least-eight-characters-at-least-one-number-a) — Harsh Saini, Jul 30 '21 at 09:31
Please add more details like html and css in a [minimal reproducable example](https://stackoverflow.com/help/minimal-reproducible-example) at best in a [stack snippet](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do). See [how to ask](https://stackoverflow.com/help/how-to-ask) — biberman, Jul 30 '21 at 09:35
That's not working because `inp.match(/[a-z]/g) && inp.match(/[^a-zA-Z\d]/g)` is like `if (true == false) {...}`. Take a look at what @HarshSaini said. — Nakarukatoshi Uzumaki, Jul 30 '21 at 09:36

Ded the Super Duck · Answer 1 · 2021-07-30T10:28:46.407

0

Output of match() is not true or false, but the match thing like str or int or if it wrong it will show null. So in your case better use "if your case (if input.match() != null) as true". There is the example !

var input = "GoodMorning Sir"

if (input.match(/[0-9]/g) != null){
  console.log("there are number here")
} else if (input.match(/[A-Z]/g) != null){
  console.log("there are uppercase here")
}

//this is your if else code, try to console.log your condition
//as you can see it wont giving output true or false
console.log(input.match(/[A-Z]/g)) // ["G", "M" , "S"]

edited Jul 30 '21 at 10:28

answered Jul 30 '21 at 09:36

Ded the Super Duck

97
1
8

In javascript, 'null' is like 'true', an example: `let i = 2; if (i) {/* This is true */}`, and `let i = null; if (i) { /* This is false */ }` An example: [W3 reproducer](https://www.w3schools.com/code/tryit.asp?filename=GSZ5D2V2T50N) – Nakarukatoshi Uzumaki Jul 30 '21 at 09:48
yah that's a goo example, i'll add it to my answer @NakarukatoshiUzumaki – Ded the Super Duck Jul 30 '21 at 10:25

score 0 · Answer 2 · edited Jul 30 '21 at 09:47

0

The code you provided is not working due to the fact that

inp.match(/[a-z]/g) && inp.match(/[^a-zA-Z\d]/g)

is just "false". You are telling there "if it contains alphabetic characters as well as it doesn't contains any", which is some sort of

let i = 0;
if (i == 1) {...}

As I said on one of the comments of your question, just search for another solution, like the one that @harsh-saini said.

edited Jul 30 '21 at 09:47

Dharman

30,962
25
85
135

answered Jul 30 '21 at 09:41

Nakarukatoshi Uzumaki

325
4
14

`password.addEventListener("focusout", () => { let checkPass = "^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[@$!%*?&])[A-Za-zd@$!%*?&]{8,}$"; if (checkPass.test(password.value)) password.style.backgroundColor = "#c0eb34"; else password.style.backgroundColor = "#FF374E"; });` tried this one but doesnt work, it throws the error, checkPass.test is not a function – Eljano Hita Jul 30 '21 at 11:22
checkpass is meant to be a regex, not a String. String doesn't have the "test" function, try `let checkPass = /^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[@$!%*?&])[A-Za-zd@$!%*?&]{8,}$/;`. – Nakarukatoshi Uzumaki Jul 30 '21 at 11:40
i tried like you said with the following code: `let passwordField = document.getElementById("password"); passwordField.addEventListener("focusout", () => { let checkPass = /^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[@$!%*?&])[A-Za-zd@$!%*?&]{8,}$/; if (checkPass.test(password.value)) { passwordField.style.backgroundColor = "green"; console.log("green"); } else { passwordField.style.backgroundColor = "red"; console.log("red"); } });` but only makes i red even if the password has all the conditions – Eljano Hita Jul 30 '21 at 12:12

Javascript validate password field input

2 Answers2