JSFiddle - React, Tailwind, and code Playground
by Terrance Smith
JavaScript
var newPasswordLengthRequirementRegex = /^.{8,35}$/;
var newPasswordOneNumberAndCapitalLetterRequirement = /^.*[A-Z]+.*[0-9]+.*|.*[0-9]+.*[A-Z]+.*$/;
var newPasswordSpecialCharacterRequirement = /^([a-zA-Z]|[\@\*\$\|\.\-\_\+\=\?\,\;\:]|[0-9])*[\@\*\$\|\.\-\_\+\=\?\,\;\:]+([a-zA-Z]|[\@\*\$\|\.\-\_\+\=\?\,\;\:]|[0-9])*$/;
var newPasswordNoWhiteSpaceRequirement = /^.*\s+.*$/;
var newPasswordNoThreeRepeatingCharactersRequirement = /^.*(.)\1{2}.*$/;
var isNewPasswordFieldTouched = false;
var isNewPasswordFieldUntouched = false;
var hasTheNewPasswordLengthRequirementBeenMet = false;
var hasTheNewPasswordOneNumberAndCapitalLetterRequirementBeenMet = false;
var hasTheNewPasswordSpecialCharacterRequirementBeenMet = false;
var doseTheNewPasswordNotHaveWhiteSpace = true;
var doesTheNewPasswordNotHaveTheUserIdInIt = true;
var doesTheNewPasswordNotHaveThreeRepeatingCharacters = true;
var hasTheNewPasswordRequirmentsBeenMet = false;
function showNewPasswordValidatorDisplay() {
forceHideValidationErrorForNewPassword();
isNewPasswordFieldTouched = true;
document.getElementById("passwordRequirements").style = "display:block";
}
function hideNewPasswordValidatorDisplay(userId, newUserId) {
shouldNewPasswordFieldBeUntouched();
var newPassword = document.getElementById("newPassword").value;
if(hasTheNewPasswordRequirmentsBeenMet) {
document.getElementById("passwordRequirements").style = "display:none";
setTheNewPesswordErrorBorderOff();
} else {
if(document.getElementById("passwordRequirements").style.display !== "none") {
newPasswordValidator(newPassword, userId, newUserId);
setTheNewPesswordErrorBorderOn();
}
}
}
function newPasswordValidator(input, userId, newUserId) {
newPasswordIsTheRightLength(input);
newPasswordHasOneNumberAndCapitalLetter(input);
newPasswordHasASpecialCharacter(input);
newPasswordDoseNotHaveWhiteSpace(input);
...