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.
const checkPassword = () => { const pswrd = document.getElementById("pswrd"); const lowerCase = document.getElementById("lower"); const upperCase = document.getElementById("upper"); const digit = document.getElementById("number"); const specialChar = document.getElementById("special"); const minLength = document.getElementById("length"); // get all li items with valid className const liList = document.querySelectorAll(".liList"); //javascript regular expression pattern const data = pswrd.value; const lower = new RegExp("(?=.*[a-z])"); const upper = new RegExp("(?=.*[A-Z])"); const number = new RegExp("(?=.*[0-9])"); const special = new RegExp("(?=.*[!@#$%^&*])"); const length = new RegExp("(?=.{8,})"); //lowerCase validation if (lower.test(data)) { lowerCase.classList.add("valid"); } else { lowerCase.classList.remove("valid"); } if (upper.test(data)) { upperCase.classList.add("valid"); } else { upperCase.classList.remove("valid"); } if (number.test(data)) { digit.classList.add("valid"); } else { digit.classList.remove("valid"); } if (special.test(data)) { specialChar.classList.add("valid"); } else { specialChar.classList.remove("valid"); } if (length.test(data)) { minLength.classList.add("valid"); } else { minLength.classList.remove("valid"); } //check if all li items have the "valid" className if (liList.classList.contains("valid") === true) { console.log("I am working"); setShowValidation(false); } else { setShowValidation(true); } }; return ( <div className={showValidation ? "validation active" : "validation "} > <ul> <li className="liList" id="lower"> At least one lowercase character </li> <li className="liList" id="upper"> At least one uppercase character </li> <li className="liList" id="number"> At least one number </li> <li className="liList" id="special"> At least one special character </li> <li className="liList" id="length"> At least 8 characters </li> </ul> </div> )
Advertisement
Answer
This is how I fixed it :
const [showValidation, setShowValidation] = useState(false); const checkPassword = () => { const pswrd = document.getElementById("pswrd"); const lowerCase = document.getElementById("lower"); const upperCase = document.getElementById("upper"); const digit = document.getElementById("number"); const specialChar = document.getElementById("special"); const minLength = document.getElementById("length"); // get all li items with valid className const liList = document.querySelectorAll(".liList"); //javascript regular expression pattern const data = pswrd.value; const lower = new RegExp("(?=.*[a-z])"); const upper = new RegExp("(?=.*[A-Z])"); const number = new RegExp("(?=.*[0-9])"); const special = new RegExp("(?=.*[!@#$%^&*])"); const length = new RegExp("(?=.{8,})"); //lowerCase validation if (lower.test(data)) { lowerCase.classList.add("valid"); } else { lowerCase.classList.remove("valid"); } if (upper.test(data)) { upperCase.classList.add("valid"); } else { upperCase.classList.remove("valid"); } if (number.test(data)) { digit.classList.add("valid"); } else { digit.classList.remove("valid"); } if (special.test(data)) { specialChar.classList.add("valid"); } else { specialChar.classList.remove("valid"); } if (length.test(data)) { minLength.classList.add("valid"); } else { minLength.classList.remove("valid"); } if ( lower.test(data) && upper.test(data) && number.test(data) && special.test(data) && length.test(data) ) { setShowValidation(false); } else { setShowValidation(true); } };