I'm kind of confuse at the moment with my special character validation.
HTML:
<label>
Password:
<br /><input
type="password"
id="password"
placeholder="Enter password"
pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{8,})"
/><br />
<span class="notif" id="pass"></span><br />
<div id="message">
<p id="letter" class="invalid">Lowercase letter</p>
<p id="capital" class="invalid">Uppercase letter</p>
<p id="number" class="invalid">Number</p>
<p id="special" class="invalid">Special Character</p>
<p id="length" class="invalid">Minimum 8 characters</p>
</div>
</label>
CSS:
#message {
display: none;
background: #ffffff;
color: #000;
padding: 0;
margin-top: 0;
margin-left: 5px;
}
#message p {
padding: 1px 2px;
font-size: 12px;
}
/* Add a green text color and a checkmark when the requirements are right */
.valid {
color: green;
}
.valid:before {
position: relative;
left: -3px;
content: '✔';
}
/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
color: red;
}
.invalid:before {
position: relative;
left: -5px;
content: '✖';
}
This is my JS for the special characters validation. I'm still confused about how to make it work. Whenever I type in a special character, it only highlights the lowercase.
JS:
// Validate special characters
var specialCharacters = /[^A-Za-z0-9]/g;
if (myInput.value.match(specialCharacters)) {
letter.classList.remove('invalid');
letter.classList.add('valid');
} else {
letter.classList.remove('valid');
letter.classList.add('invalid');
}
I know my problem lies somewhere in var specialCharacters = /[^A-Za-z0-9]/g; but what could it be?
You can follow this:
var strongRegex = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})");
What does it mean?
^ The password string will start this way
(?=.*[a-z]) The string must contain at least 1 lowercase alphabetical character
(?=.*[A-Z]) The string must contain at least 1 uppercase alphabetical character
(?=.*[0-9]) The string must contain at least 1 numeric character
(?=.*[!@#$%^&*]) The string must contain at least one special character, but we are escaping reserved RegEx characters to avoid conflict
(?=.{8,}) The string must be eight characters or longer
You can edit the expression, for example if you want to change minimum length to 10 change (?=.{8,}) to (?=.{10,})
You can check the condition by strongRegex.exec(myInput)
I hope this gave the ans.
Here /[^A-Za-z0-9]/g explained step by stepstrong text:
/ for Find a word character.^ Find any character NOT between the brackets.A-Za-z0-9 mean the capital letter A to Z and smalla to z, and 0 to 9 if any character or
number and the/g Perform a global match (find all matches rather than
stopping after the first match)You can learn more about this similar type operation or regular expression here JavaScript RegExp Reference
You can use this Expression for your password validation.
var specialCharacters = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$/
This expression will check for one uppercase ,one lowercase, one special character and password length should be 8 to 15 characters.
var specialCharacters = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$/;
if (myInput.value.match(specialCharacters)) {
letter.classList.remove('invalid');
letter.classList.add('valid');
} else {
letter.classList.remove('valid');
letter.classList.add('invalid');
}