Confirm password with form validation in JavaScript Code examples

Form validation is a process to validate that user is submitting the data according to correct format or not. Most of the time it happens that user enter the password during registration and he thinks that he enter the password as he thinks but unfortunately due to the wrong fingers on the keyboard his password is set to some other password.

For example, the user wants to enter the password as;

Password: asdf

but mistakenly he enters the password as follows;

Password: asdg

In such conditions, there is a problem for the user. To avoid this problem, we as a web developer asks the user to enter the password two times. Form validation can be done by JavaScript.

Example of code for Confirm password form validation in JavaScript

Let’s verify password and confirm password fields in HTML using JS.

<html>
<head>
 <script type="text/javascript">
        function Validate() {
            var password = document.getElementById("1stPassword").value;
            var confirmPassword = document.getElementById("ConfirmPassword").value;
            if (password != confirmPassword) {
                alert("You first Passwords is not similar with 2nd password. Please enter same password in both");
                return false;
            }
            return true;
        }
    </script>
	</head>
<body>
 Enter 1st Password:
<input type="password" id="1stPassword" />
Enter 2nd password to Confirm 1st Password:
<input type="password" id="ConfirmPassword" />
<input type="button" id="btnSubmit" value="Submit" onclick="return Validate()" />
          
</body>
</html>

<html>

<head>

function Validate() {

var password = document.getElementById("1stPassword").value;

var confirmPassword = document.getElementById("ConfirmPassword").value;

if (password != confirmPassword) {

alert("You first Passwords is not similar with 2nd password. Please enter same password in both");

return false;

}

return true;

}

</script>

</head>

<body>

Enter 1st Password:

Enter 2nd password to Confirm 1st Password:

</body>

</html>

Example of code for Confirm password form validation in JavaScript with detailed HTML code

<html>
<head>
 <script type="text/javascript">
        function Validate() {
            var password = document.getElementById("1stPassword").value;
            var confirmPassword = document.getElementById("ConfirmPassword").value;
            if (password != confirmPassword) {
                alert("You first Passwords is not similar with 2nd password. Please enter same password in both");
                return false;
            }
            return true;
        }
    </script>
	</head>
<body>
    <table border="1" cellspacing="2" cellpadding="5" >
        <tr>
            <td>
                Enter 1st Password:
            </td>
            <td>
                <input type="password" id="1stPassword" />
            </td>
        </tr>
        <tr>
            <td>
               Enter 2nd password to Confirm 1st Password:
            </td>
            <td>
                <input type="password" id="ConfirmPassword" />
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <input type="button" id="btnSubmit" value="Submit" onclick="return Validate()" />
            </td>
        </tr>
    </table>
  
</body>
</html>

<html>

<head>

function Validate() {

var password = document.getElementById("1stPassword").value;

var confirmPassword = document.getElementById("ConfirmPassword").value;

if (password != confirmPassword) {

alert("You first Passwords is not similar with 2nd password. Please enter same password in both");

return false;

}

return true;

}

</script>

</head>

<body>

<tr>

<td>

Enter 1st Password:

</td>

<td>

</td>

</tr>

<tr>

<td>

Enter 2nd password to Confirm 1st Password:

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

</table>

</body>

</html>

Regular expression for password strength validation in Javascript

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
        <script>
            var T4Tutorials = angular.module("T4Tutorials", []);
            T4Tutorials.controller("PasswordController", function($scope) {

                var strongRegex = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})");
                var mediumRegex = new RegExp("^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})");

                $scope.passwordStrength = {
                    "float": "left",
                    "width": "100px",
                    "height": "25px",
                    "margin-left": "5px"
                };

                $scope.analyze = function(value) {
                    if(strongRegex.test(value)) {
                        $scope.passwordStrength["background-color"] = "pink";
                    } else if(mediumRegex.test(value)) {
                        $scope.passwordStrength["background-color"] = "yellow";
                    } else {
                        $scope.passwordStrength["background-color"] = "gray";
                    }
                };

            });
        </script>
    </head>
    <body ng-app="T4Tutorials">
        <div ng-controller="PasswordController">
            <div style="float: left; width: 100px">
                <input type="text" ng-model="password" ng-change="analyze(password)" style="width: 250px; height: 30px" />
            </div>
            <div ng-style="passwordStrength"></div>
        </div>
    </body>
</html>

<html>

<head>

var T4Tutorials = angular.module("T4Tutorials", []);

T4Tutorials.controller("PasswordController", function($scope) {

var strongRegex = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})");

var mediumRegex = new RegExp("^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})");

$scope.passwordStrength = {

"float": "left",

"width": "100px",

"height": "25px",

"margin-left": "5px"

};

$scope.analyze = function(value) {

if(strongRegex.test(value)) {

$scope.passwordStrength["background-color"] = "pink";

} else if(mediumRegex.test(value)) {

$scope.passwordStrength["background-color"] = "yellow";

} else {

$scope.passwordStrength["background-color"] = "gray";

}

};

});

</script>

</head>

</div>

</div>

</body>

</html>

Let’s dicuss the Regular expression;

var strongRegex = new RegExp(“^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})”);

RegEx	Description
^	The password string starting.
(?=.*[a-z])	Must contain at least 1 lowercase alphabetical character from a to z.
(?=.*[A-Z])	Must contain at least 1 uppercase alphabetical character from A to Z.
(?=.*[0-9])	Must contain at least 1 numeric character from 0 to 9.
(?=.[!@#$%^&])	Must contain at least one special character.
(?=.{8,})	Must be eight characters or longer string

Re-enter password validation Javascript

<html>
<head>
<script>
function pass_validation()
{
var type_Password=document.T4Tutorials.password1.value;  
var Retype_Password=document.T4Tutorials.password2.value;  

if(type_Password==Retype_Password){  
return true;  
}  
else{  
alert("password one and two must be same!");  
return false;  
}  
} 
</script>
</head>
<body>
<form name="T4Tutorials" action="/JavaScript/Index" onsubmit="return pass_validation()">  
Password:<input type="password" name="password1" /><br/>  
Re-enter Password:<input type="password" name="password2"/><br/>  
<input type="submit">  
</form> 
</body>
</html>

<html>

<head>

function pass_validation()

{

var type_Password=document.T4Tutorials.password1.value;

var Retype_Password=document.T4Tutorials.password2.value;

if(type_Password==Retype_Password){

return true;

}

else{

alert("password one and two must be same!");

return false;

}

</script>

</head>

<body>

Password:<input type="password" name="password1" /><br/>

Re-enter Password:<input type="password" name="password2"/><br/>

</form>

</body>

</html>

Strong password validation in javascript

<!DOCTYPE html>
<html>
    <head>
        <title> Strong password validation in javascript </title>
        <script>
            function validatePassword(password) {
                
                // It will not show anything when the length of password will be zero.
                if (password.length === 0) {
                    document.getElementById("UniqueID").innerHTML = "";
                    return;
                }
                // Creation of new array and push all possible values in password
                var T4Tutorials = new Array();
                T4Tutorials.push("[$@$!%*#?&]"); // Special Charector
                T4Tutorials.push("[A-Z]");      // Uppercase Alpabates
                T4Tutorials.push("[0-9]");      // Numbers
                T4Tutorials.push("[a-z]");     // Lowercase Alphabates
                var ctr = 0;
                for (var i = 0; i < T4Tutorials.length; i++) {
                    if (new RegExp(T4Tutorials[i]).test(password)) {
                        ctr++;
                    }
                }
                // Display it
                var color = "";
                var strength = "";
                switch (ctr) {
                    case 0:
                    case 1:
                    case 2:
                        strength = "Very Weak in length";
                        color = "blue";
                        break;
                    case 3:
                        strength = "Medium";
                        color = "pink";
                        break;
                    case 4:
                        strength = "Strong";
                        color = "gray";
                        break;
                }
                document.getElementById("UniqueID").innerHTML = strength;
                document.getElementById("UniqueID").style.color = color;
            }
        </script>
    </head>
    <body>
        <strong> strong password validation in javascript </strong>
        
        <div>

            <label for="pwd">Password:</label>
            <input type="text" id="pwd"  onkeyup="validatePassword(this.value);"/><span id="UniqueID"></span>

        </div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title> Strong password validation in javascript </title>

function validatePassword(password) {

// It will not show anything when the length of password will be zero.

if (password.length === 0) {

document.getElementById("UniqueID").innerHTML = "";

return;

}

// Creation of new array and push all possible values in password

var T4Tutorials = new Array();

T4Tutorials.push("[$@$!%*#?&]"); // Special Charector

T4Tutorials.push("[A-Z]"); // Uppercase Alpabates

T4Tutorials.push("[0-9]"); // Numbers

T4Tutorials.push("[a-z]"); // Lowercase Alphabates

var ctr = 0;

for (var i = 0; i < T4Tutorials.length; i++) {

if (new RegExp(T4Tutorials[i]).test(password)) {

ctr++;

}

// Display it

var color = "";

var strength = "";

switch (ctr) {

case 0:

case 1:

case 2:

strength = "Very Weak in length";

color = "blue";

break;

case 3:

strength = "Medium";

color = "pink";

break;

case 4:

strength = "Strong";

color = "gray";

break;

}

document.getElementById("UniqueID").innerHTML = strength;

document.getElementById("UniqueID").style.color = color;

}

</script>

</head>

<body>

<strong> strong password validation in javascript </strong>

<div>

<label for="pwd">Password:</label>

</div>

</body>

</html>

Topic Covered

Confirm password with form validation in JavaScript Code examples

List of All Programs of Javascript : Click Here .

Add a Comment

You must be logged in to post a comment.