I am working on a password validation process. when the password input in a Sign up page is clicked a list of requirement is shown
And if the created password respect one of the requirements a “valid” className will be added to the li that will add additional styles to it.
what I want to do next is to check if all requirements are respected and if so hide the list. I tried this code here but with no luck.
JavaScript
x
79
79
1
const checkPassword = () => {
2
const pswrd = document.getElementById("pswrd");
3
const lowerCase = document.getElementById("lower");
4
const upperCase = document.getElementById("upper");
5
const digit = document.getElementById("number");
6
const specialChar = document.getElementById("special");
7
const minLength = document.getElementById("length");
8
9
// get all li items with valid className
10
const liList = document.querySelectorAll(".liList");
11
12
//javascript regular expression pattern
13
const data = pswrd.value;
14
const lower = new RegExp("(?=.*[a-z])");
15
const upper = new RegExp("(?=.*[A-Z])");
16
const number = new RegExp("(?=.*[0-9])");
17
const special = new RegExp("(?=.*[!@#$%^&*])");
18
const length = new RegExp("(?=.{8,})");
19
20
//lowerCase validation
21
22
if (lower.test(data)) {
23
lowerCase.classList.add("valid");
24
} else {
25
lowerCase.classList.remove("valid");
26
}
27
if (upper.test(data)) {
28
upperCase.classList.add("valid");
29
} else {
30
upperCase.classList.remove("valid");
31
}
32
if (number.test(data)) {
33
digit.classList.add("valid");
34
} else {
35
digit.classList.remove("valid");
36
}
37
if (special.test(data)) {
38
specialChar.classList.add("valid");
39
} else {
40
specialChar.classList.remove("valid");
41
}
42
if (length.test(data)) {
43
minLength.classList.add("valid");
44
} else {
45
minLength.classList.remove("valid");
46
}
47
48
//check if all li items have the "valid" className
49
if (liList.classList.contains("valid") === true) {
50
console.log("I am working");
51
setShowValidation(false);
52
} else {
53
setShowValidation(true);
54
}
55
};
56
57
return (
58
<div
59
className={showValidation ? "validation active" : "validation "}
60
>
61
<ul>
62
<li className="liList" id="lower">
63
At least one lowercase character
64
</li>
65
<li className="liList" id="upper">
66
At least one uppercase character
67
</li>
68
<li className="liList" id="number">
69
At least one number
70
</li>
71
<li className="liList" id="special">
72
At least one special character
73
</li>
74
<li className="liList" id="length">
75
At least 8 characters
76
</li>
77
</ul>
78
</div>
79
)
Advertisement
Answer
This is how I fixed it :
JavaScript
1
61
61
1
const [showValidation, setShowValidation] = useState(false);
2
3
const checkPassword = () => {
4
const pswrd = document.getElementById("pswrd");
5
const lowerCase = document.getElementById("lower");
6
const upperCase = document.getElementById("upper");
7
const digit = document.getElementById("number");
8
const specialChar = document.getElementById("special");
9
const minLength = document.getElementById("length");
10
11
// get all li items with valid className
12
const liList = document.querySelectorAll(".liList");
13
14
//javascript regular expression pattern
15
const data = pswrd.value;
16
const lower = new RegExp("(?=.*[a-z])");
17
const upper = new RegExp("(?=.*[A-Z])");
18
const number = new RegExp("(?=.*[0-9])");
19
const special = new RegExp("(?=.*[!@#$%^&*])");
20
const length = new RegExp("(?=.{8,})");
21
22
//lowerCase validation
23
24
if (lower.test(data)) {
25
lowerCase.classList.add("valid");
26
} else {
27
lowerCase.classList.remove("valid");
28
}
29
if (upper.test(data)) {
30
upperCase.classList.add("valid");
31
} else {
32
upperCase.classList.remove("valid");
33
}
34
if (number.test(data)) {
35
digit.classList.add("valid");
36
} else {
37
digit.classList.remove("valid");
38
}
39
if (special.test(data)) {
40
specialChar.classList.add("valid");
41
} else {
42
specialChar.classList.remove("valid");
43
}
44
if (length.test(data)) {
45
minLength.classList.add("valid");
46
} else {
47
minLength.classList.remove("valid");
48
}
49
50
if (
51
lower.test(data) &&
52
upper.test(data) &&
53
number.test(data) &&
54
special.test(data) &&
55
length.test(data)
56
) {
57
setShowValidation(false);
58
} else {
59
setShowValidation(true);
60
}
61
};