Any website that supports authentication and authorization always asks for a username and password through login. If not so, the user needs to register and create a password to login into the next session, and hence websites tend to provide specific protocols or parameters. The following parameters are commonly used for password validation in any form.
- Only alphanumeric inputs are accepted in the password field.
- It should start with the uppercase alphabet.
- At Least one uppercase alphabet password.
- The password should be of a specific length.
- One numeric value must be used in the password.
- The password must have a minimum and maximum length.
Password validation in JavaScript ensures that these parameters are followed when the user creates a password. The given conditions must be met for the formation of a reasonably strong password. The structure of the password can be validated by regular expression using JavaScript code.
For processing the password validation using JavaScript in the password field, the below steps would be followed.
Password Validation in Javascript
1. Create an HTML Form
The form should have basic fields like email, phone number and password. Let’s see an example of HTML code to define the structure of the form.
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Form</title>
</head>
<body>
<div class=“container”>
<form action=“/action_page.php”>
<label for=“usrname”>Email Address</label>
<input type=“text” id=“usrname” name=“usrname” required>
<label for=“psw”>Password</label>
<input type=“password” id=“psw” name=“psw” pattern=“(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}” title=“Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters” required>
<input type=“submit” value=“Submit”>
</form>
</div>
<div id=“message”>
<h3>Password must contain the following:</h3>
<p id=“letter” class=“invalid”>A <b>lowercase</b> letter</p>
<p id=“capital” class=“invalid”>A <b>capital (uppercase)</b> letter</p>
<p id=“number” class=“invalid”>A <b>number</b></p>
<p id=“length” class=“invalid”>Minimum <b>16 characters</b></p>
</div>
</body>
</html>
2. Add CSS
input {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
}
/* Style the submit button */
input[type=submit] {
background-color: #4CAF50;
color: white;
}
/* Style the container for inputs */
.container {
background-color: #f1f1f1;
padding: 20px;
}
#message {
display:none;
background: #f1f1f1;
color: #000;
position: relative;
padding: 20px;
margin-top: 10px;
}
#message p {
padding: 10px 35px;
font-size: 18px;
}
.valid {
color: rgb(3, 184, 190);
}
.valid:before {
position: relative;
left: -35px;
content: “✔”;
}
.invalid {
color: red;
}
.invalid:before {
position: relative;
left: -35px;
content: “✖”;
}
Checkout: Top Javascript Frameworks in 2021
3. Add JavaScript
var myInput = document.getElementById(“psw”);
var letter = document.getElementById(“letter”);
var capital = document.getElementById(“capital”);
var number = document.getElementById(“number”);
var length = document.getElementById(“length”)
myInput.onfocus = function() {
document.getElementById(“message”).style.display = “block”;
}
myInput.onblur = function() {
document.getElementById(“message”).style.display = “none”;
}
myInput.onkeyup = function() {
var lowerCaseLetters = /[a-z]/g;
if(myInput.value.match(lowerCaseLetters)) {
letter.classList.remove(“invalid”);
letter.classList.add(“valid”);
} else {
letter.classList.remove(“valid”);
letter.classList.add(“invalid”);
}
var upperCaseLetters = /[A-Z]/g;
if(myInput.value.match(upperCaseLetters)) {
capital.classList.remove(“invalid”);
capital.classList.add(“valid”);
} else {
capital.classList.remove(“valid”);
capital.classList.add(“invalid”);
}
var numbers = /[0-9]/g;
if(myInput.value.match(numbers)) {
number.classList.remove(“invalid”);
number.classList.add(“valid”);
} else {
number.classList.remove(“valid”);
number.classList.add(“invalid”);
}
if(myInput.value.length >= 8) {
length.classList.remove(“invalid”);
length.classList.add(“valid”);
} else {
length.classList.remove(“valid”);
length.classList.add(“invalid”);
}
}
The JavaScript code initially gets an element by the id; after that, it allows it to display on screen. It also runs conditions to get the password in the given format. The uppercase alphabets, lowercase alphabets and numbers are validated through the regular expression created in code.
4. Regular Expressions/REGEX
Regular expressions are patterns to match the original combination of literals passed in the field. In password validation, using JavaScript’s regular expression plays an essential role in identifying the string and whether it is in the given format or not. Regular expressions are JavaScript objects. These regular expressions are written in between slashes in JavaScript code for password validation.
Example: let re=/ac-b/
How to Write Password Validation in JavaScript Using Regular Expression?
A regular expression is formed of simple characters combined with special characters. The regular expression is formed according to the parameters or constraints of a strong password. Special characters are used when there exist a tough match of strings or characters.
The JavaScript code depicted above-made use of regular expressions to find upper case alphabets, lower case alphabets and numbers. The expression is made with different sequences and subsequences. There are certain rules for each character that is used in the regular expression.
Example: let number=/[0-9]/g. It accepts the numbers in the range of 0-9.
Checkout: Javascript Projects in Github
Conclusion
Password validation is crucial as it allows the user to create a strong password and avoids any potential password cracks. Using JavaScript, one can add interactivity and hence notify the user until the password has all the required characters in any sequence. The regular expression coded in JavaScript plays a key role in defining the sequences. It brings down the written parameters to the JavaScript code.
If you’re interested to learn more about full-stack development, check out upGrad & IIIT-B’s PG Diploma in Full-stack Software Development which is designed for working professionals and offers 500+ hours of rigorous training, 9+ projects and assignments, IIIT-B Alumni status, practical hands-on capstone projects & job assistance with top firms.
