Password validation in JavaScript
We'll talk about how to use JavaScript to validate passwords. Every time a user establishes an account on a website or app, we must confirm the password.
As a result, we must validate a valid password as well as enable password validation. The following criteria must be present in a password to be valid:
- A password should be made up of alphanumeric characters.
- The password's first letter should be in the capital.
- A special character (@, $,! &, etc.) must be included in the password.
- The length of the password must be higher than 8 characters.
- One of the most essential things to remember is that the password fields should never be left blank.
There are two different approaches mentioned here for a valid password:
-
Validation form with username
-
Validation form with Confirm password
We will discuss each approaches one by one:
Approach 1 - Validation Form with username
In this example, we'll check whether the user-created password is legitimate by comparing it to all of the parameters listed above. For password verification, look at the code below.
<html>
<head>
<title> Verificatiom </title>
</head>
<script>
function verifyPassword() {
var pw = document.getElementById("pswd").value;
if(pw == "") {
document.getElementById("message").innerHTML = "**Fill the password!";
return false;
}
if(pw.length < 8) {
document.getElementById("message").innerHTML = "** length must be atleast 8 characters";
return false;
}
if(pw.length > 15) {
document.getElementById("message").innerHTML = "** length must not exceed 15 characters";
return false;
} else {
alert("Password is correct");
}
}
</script>
<body>
<center>
<h1 style="color:Orange">StudyTonight</h1>
<h3> Validate password </h3>
<form onsubmit ="return verifyPassword()">
<td> Enter Username</td>
<input type = "username" id = "usr" value = ""><br><br>
<td> Enter Password </td>
<input type = "password" id = "pswd" value = "">
<span id = "message" style="color:orange"> </span> <br><br>
<input type = "submit" value = "Submit" style="border-color:orange">
<button type = "reset" value = "Reset" style="border-color:orange">Reset</button>
</form>
</center>
</body>
</html>
Output:
After entering the wrong password.
Approach 2 - Validation Form with Confirm password
In this example, we will validate the password by ensuring that both the user's password and the password entered by the user are the same. Before the form is loaded, this procedure will be carried out at the client's site using JavaScript.
<html>
<head>
<center>
<title> Password Validation</title>
</head>
<script>
function validateForm() {
var pw1 = document.getElementById("pswd1").value;
var pw2 = document.getElementById("pswd2").value;
var name1 = document.getElementById("fname").value;
if(name1 == "") {
document.getElementById("blankMsg").innerHTML = "**Fill the first name";
return false;
}
if(!isNaN(name1)){
document.getElementById("blankMsg").innerHTML = "**Only characters are allowed";
return false;
}
if(pw1 == "") {
document.getElementById("message1").innerHTML = "**Fill the password please!";
return false;
}
if(pw2 == "") {
document.getElementById("message2").innerHTML = "**Enter the password please!";
return false;
}
if(pw1.length < 8) {
document.getElementById("message1").innerHTML = "**length must be atleast 8 characters";
return false;
}
if(pw1.length > 15) {
document.getElementById("message1").innerHTML = "**length must not exceed 15 characters";
return false;
}
if(pw1 != pw2) {
document.getElementById("message2").innerHTML = "**Passwords are not same! Retry with new Password";
return false;
} else {
alert ("password created successfully");
document.write("form has been submitted successfully");
}
}
</script>
<body>
<h1 style="color:orange">StudyTonight</h1>
<h3> Please Fill the form </h3>
<form onsubmit ="return validateForm()">
<td> Full Name* </td>
<input type = "text" id = "fname" value = "">
<span id = "blankMsg" style="color:orange"> </span> <br><br>
<td> Create Password* </td>
<input type = "password" id = "pswd1" value = "">
<span id = "message1" style="color:orange"> </span> <br><br>
<td> Confirm Password* </td>
<input type = "password" id = "pswd2" value = "">
<span id = "message2" style="color:orange"> </span> <br><br>
<input type = "submit" value = "Submit">
<button type = "reset" value = "Reset" >Reset</button>
</form>
</body>
</center>
</html>
Output:
If the password is valid then:-
If the password length is not valid then:-
If the password length is not matched then:-
Conclusion
We have performed password validation in 2 different ways. The first one is a direct one i.e., Validation Form with username where we use all the validations in point and then created a form with a username. The second one was a login or register form model in which name, create password, and confirm password are some of the fields. The fields marked with an asterisk (*) are mandatory fields in which the user must provide data.
