We'll talk about Password validation in JavaScript in this blog. Each time a user creates an account on any website or app, we must authenticate a password. We must thus verify a valid password and confirm the validation of the password. The parameters below must be valid in order to have a valid password.
- An alphanumeric password must be used.
- The first letter always needs to be capital.
- A special character must be included in the password (@, $, !, &, etc).
- The length of the password must exceed 8 characters.
One of the most crucial things about not emptying the password boxes makes it more secure. Whenever a user creates a password, one extra confirm password field always exists. This makes the password confirmed by the system. Password validation in JavaScript leads to protection of your programs in the best manner. Your app can enjoy a sense of security in the right form if it is validated by a proper password.
Example for Password Validation in JavaScript
<html>
<head>
<title> Verification of valid Password </title>
</head>
<script>
function verifyPassword() {
var pw = document.getElementById("pswd").value;
//check empty password field
if(pw == "") {
document.getElementById("message").innerHTML = "**Fill the password please!";
return false;
}
//minimum password length validation
if(pw.length < 8) {
document.getElementById("message").innerHTML = "**Password length must be atleast 8 characters";
return false;
}
//maximum length of password validation
if(pw.length > 15) {
document.getElementById("message").innerHTML = "**Password length must not exceed 15 characters";
return false;
} else {
alert("Password is correct");
}
}
</script>
<body>
<center>
<h3> Verify valid password Example </h3>
<form onsubmit ="return verifyPassword()">
<!-- Enter Password -->
<td> Enter Password </td>
<input type = "password" id = "pswd" value = "">
<span id = "message" style="color:red"> </span> <br><br>
<!-- Click to verify valid password -->
<input type = "submit" value = "Submit">
<!-- Click to reset fields -->
<button type = "reset" value = "Reset" >Reset</button>
</form>
</center>
</body>
</html>
Output
What Is the Need for Password Validation in JavaScript?
When a user creates a password, Password validation in JavaScript guarantees that these parameters are obeyed. For the creation of a fairly strong password, the following factors must be followed. Regular expressions in JavaScript code can be used to validate the password structure. The procedures below will be performed to conduct the password validation using JavaScript in the password field.
Regular expressions are patterns that are used to match the original literals given into the field. When it comes to password validation, employing JavaScript's regular expression is critical for detecting the string and determining whether it is in the correct format. JavaScript objects are regular expressions. For password validation, regular expressions are written between slashes in JavaScript code.
Creating a Complete Form and Implementing Password Validation
<!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=“username”>Email Address</label>
<input type=“text” id=“username” name=“username” 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> </b> letter</p>
<p id=“capital” class=“invalid”>A <b>capital (uppercase)</b> </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>
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: “✖”;
}
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”);
}
}
Output
The id of an element is first obtained by the JavaScript code, which then allows it to be displayed on the screen. It also applies conditions in order to obtain the password in the desired format. The numerals, uppercase alphabets, and lowercase alphabets are all confirmed using a regular expression written in code.
Advance your career as a MEAN stack developer with the Full Stack Web Developer - MEAN Stack Master's Program. Enroll now!
Conclusion
Password validation in JavaScript is essential since it allows the user to create a secure password and prevents password cracking. Using JavaScript, you may add interactivity to the password and thereby notify the user until it contains all of the required characters in any order. The sequences are defined in part by a regular expression written in JavaScript. It reduces the number of written parameters to JavaScript code.
If you want to learn more about full-stack programming for Password validation in JavaScript, look into Simplilearn’s PGP in Full-Stack Software Development program, which is tailored for working professionals and includes 500+ hours of intensive training, 9+ projects, and assignments. The skill up courses for Password validation in JavaScript can also help you polish your skills and enjoy proper working on different complex programs with generation of good results.