diff --git a/src/password.js b/src/password.js index d7de6a6..e76b2e9 100644 --- a/src/password.js +++ b/src/password.js @@ -19,18 +19,20 @@ function checkPasswordMatch() { passwordInput.value === "" ) { passwordMatch.style.backgroundColor = ""; + passwordConfirmInput.setCustomValidity("Passwords don't match"); return false; } passwordMatch.style.backgroundColor = "#4b4"; + passwordConfirmInput.setCustomValidity(""); return true; } -function checkPasswordRequirement(e, regex, element) { - if (e.value.search(regex) >= 0) { - element.style.backgroundColor = "#4b4"; +function checkPasswordRequirement(regex, requirementElement) { + if (passwordInput.value.search(regex) >= 0) { + requirementElement.style.backgroundColor = "#4b4"; return true; } - element.style.backgroundColor = ""; + requirementElement.style.backgroundColor = ""; return false; } @@ -41,23 +43,18 @@ function checkPasswordValidity() { } else { passwordLength.style.backgroundColor = ""; } - const lowercase = checkPasswordRequirement( - passwordInput, - /[a-z]/, - passwordLowercase, - ); - const uppercase = checkPasswordRequirement( - passwordInput, - /[A-Z]/, - passwordUppercase, - ); - const number = checkPasswordRequirement(passwordInput, /\d/, passwordNumber); - const special = checkPasswordRequirement( - passwordInput, - /[#?!@$%^&*-]/, - passwordSpecial, - ); - return length && lowercase && uppercase && number && special; + const lowercase = checkPasswordRequirement(/[a-z]/, passwordLowercase); + const uppercase = checkPasswordRequirement(/[A-Z]/, passwordUppercase); + const number = checkPasswordRequirement(/\d/, passwordNumber); + const special = checkPasswordRequirement(/[#?!@$%^&*-]/, passwordSpecial); + const suitsRequirements = + length && lowercase && uppercase && number && special; + if (suitsRequirements) { + passwordInput.setCustomValidity(""); + } else { + passwordInput.setCustomValidity("Password does not meet requirements"); + } + return suitsRequirements; } export { checkPasswordValidity, checkPasswordMatch };