In this chapter, we will discuss password validation using JavaScript. We need to validate a password every time whenever a user creates an account on any website or app. So, we have to verify a valid password as well as put the confirm password validation. For a valid password, the following parameters must be contained by it to be valid -
- A password should be alphanumeric.
- First letter of the password should be capital.
- Password must contain a special character (@, $, !, &, etc).
- Password length must be greater than 8 characters.
- One of the most important that the password fields should not be empty.
When a user sets a password, there is typically an additional field labeled confirm password. This field serves to verify that the password inputted by the user matches the value entered in the confirm password section. For a password to be deemed valid, the values in both the password and confirm password fields must align perfectly.
Initially, we will verify the validity of a password, followed by executing checks to confirm the accuracy of the password validation.
Valid password Validation
In this illustration, we will verify whether the password established by the user meets the defined criteria and aligns with all the specifications mentioned earlier. Refer to the following code for the process of password validation.
Copy Code
<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>
<h1 style="color:green">C# Tutorial</h1>
<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 1
Output on leaving the password field blank.
Output 2
Output on entering a valid password.
Note: In the above screenshots, you may have noticed that password is visible to everyone because we have used input type=text. If you want that the password will not be visible while entering, use input type=password in your HTML form .
Confirm Password Validation
In this instance, we will ensure the integrity of the password by checking that the passwords input by the user match. This procedure will be executed on the client side utilizing JavaScript prior to the form submission.
Copy Code
<html>
<head>
<title> Password Matching Validation </title>
</head>
<script>
function matchPassword() {
var pw1 = document.getElementById("pswd1");
var pw2 = document.getElementById("pswd2");
if(pw1 != pw2)
{
alert("Passwords did not match");
} else {
alert("Password created successfully");
}
}
</script>
<body>
<center>
<form>
<h1 style="color:green">C# Tutorial</h1>
<h3> Confirm password Validation Example </h3>
<!-- Enter Password -->
<td> Enter Password </td>
<input type = "password" name = "pswd1"> <br><br>
<!-- Enter Confirm password -->
<td> Confirm Password </td>
<input type = "password" name = "pswd2"> <br><br>
<!?Click to validate confirm password -->
<button type = "submit" onclick="matchPassword()">Submit</button>
<!-- Click to reset fields -->
<button type = "reset" value = "Reset" >Reset</button>
</form>
</center>
</body>
</html>
Output
To begin with, we will input varying values into both the password and confirm password fields. An alert dialog will appear, displaying the message: Passwords did not match. Refer to the output shown below:
In this step, we will input identical values into both the password and confirm password fields to ensure that the validation logic is functioning correctly. An alert dialog will appear with the message: Password created successfully. Please refer to the output shown below:
Note that we have used one more button (Reset) in this form to clear the field's data entered by the user.
A complete form with password validation
In the preceding examples, you have acquired knowledge on how to validate a password and ensure the confirmation of that password. At this point, we will consolidate both validation processes into one form to finalize the password validation procedure.
For this, we will create a simple basic signup form that will contain some fields, such as first name, last name, create password, and confirm password. The fields with a star (*) are required fields in which the user must have to provide some value. We will put the following validation in this form to validate a password:
- Empty field validation
- Minimum password length validation, i.e., > 8
- Maximum password length validation, i.e., <15
- Confirm password validation
In addition, we have incorporated a Reset button designed to clear the data within the fields of the form. When you press this reset button, every piece of information entered by the user in the fields will be erased. Take a look at the code provided below:
Copy Code
<html>
<head>
<title> Validate the Password </title>
</head>
<script>
function validateForm() {
//collect form data in JavaScript variables
var pw1 = document.getElementById("pswd1").value;
var pw2 = document.getElementById("pswd2").value;
var name1 = document.getElementById("fname").value;
var name2 = document.getElementById("lname").value;
//check empty first name field
if(name1 == "") {
document.getElementById("blankMsg").innerHTML = "**Fill the first name";
return false;
}
//character data validation
if(!isNaN(name1)){
document.getElementById("blankMsg").innerHTML = "**Only characters are allowed";
return false;
}
//character data validation
if(!isNaN(name2)){
document.getElementById("charMsg").innerHTML = "**Only characters are allowed";
return false;
}
//check empty password field
if(pw1 == "") {
document.getElementById("message1").innerHTML = "**Fill the password please!";
return false;
}
//check empty confirm password field
if(pw2 == "") {
document.getElementById("message2").innerHTML = "**Enter the password please!";
return false;
}
//minimum password length validation
if(pw1.length < 8) {
document.getElementById("message1").innerHTML = "**Password length must be atleast 8 characters";
return false;
}
//maximum length of password validation
if(pw1.length > 15) {
document.getElementById("message1").innerHTML = "**Password length must not exceed 15 characters";
return false;
}
if(pw1 != pw2) {
document.getElementById("message2").innerHTML = "**Passwords are not same";
return false;
} else {
alert ("Your password created successfully");
document.write("JavaScript form has been submitted successfully");
}
}
</script>
<body>
<h1 style="color:green">C# Tutorial</h1>
<h3> Verify valid password Example </h3>
<form onsubmit ="return validateForm()">
<!-- Enter first name -->
<td> Full Name* </td>
<input type = "text" id = "fname" value = "">
<span id = "blankMsg" style="color:red"> </span> <br><br>
<!-- Enter last name -->
<td> Last Name </td>
<input type = "text" id = "lname" value = "">
<span id = "charMsg" style="color:red"> </span> <br><br>
<!-- Create a new password -->
<td> Create Password* </td>
<input type = "password" id = "pswd1" value = "">
<span id = "message1" style="color:red"> </span> <br><br>
<!?Enter confirm password -->
<td> Confirm Password* </td>
<input type = "password" id = "pswd2" value = "">
<span id = "message2" 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>
</body>
</html>
Output
When the aforementioned code is executed, an HTML form will be displayed on the webpage. In this form, you can enter your information into the text fields and then click the Submit button to initiate processing. Based on the validation rules, if the entered data is accurate, an alert box will appear with the message: Your Password has been created successfully. Upon clicking the OK button in the alert, you will be redirected to a different output.
Screenshot 1
Upon clicking the OK button within the alert dialog, the program will transition to a straightforward HTML output that conveys the message: Form data has been submitted successfully.
Screenshot 2
Output on providing wrong entries
If you input an incorrect value or fail to fill in any mandatory fields, an error message will appear to the right of the input field. These error messages will be presented sequentially following the validation process with each press of the Submit button. Refer to the errors illustrated in the screenshot below:
To verify that all the validations function as intended, duplicate the code and run it in your JavaScript compiler.