password and confirm password validation in html Example

password and confirm password validation in html: Let’s verify password and confirm password fields in HTML using javascript. how to validate password and confirm password using jQuery.

password and confirm password validation in html

Confirm Password Check using JavaScript. I will tell you how to make confirm password validation in html5.

How to validate password and confirm password is match or not jQuery?

here we will use the javascript for that example.
index.html

<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="password" id="txtNewSecPass" placeholder="Enter passward" name="pass">
<input type="password" id="txtConfirmSecPass" placeholder="Confirm Passward" name="confpass" >
	<div class="registrationFormAlert" style="color:green;" id="CheckSecPassMatch">
    <script>
    function checkSecPassMatch() {
        var SecPass = $("#txtNewSecPass").val();
        var confirmSecPass = $("#txtConfirmSecPass").val();
        if (SecPass != confirmSecPass)
            $("#CheckSecPassMatch").html("Your Passwords does not match!");
        else
            $("#CheckSecPassMatch").html("Good Luck, Your Passwords match.");
    }
    $(document).ready(function () {
       $("#txtConfirmSecPass").keyup(checkSecPassMatch);
    });
    </script>
    <body>
</html>

Don’t Miss : Password and confirm password validation in jquery

Example of code for Confirm password form validation in JavaScript

index.html

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

Confirm password form validation in JavaScript with detailed HTML code

index.html

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

Don’t Miss : Password and Confirm password validation in HTML5

Read Also:  Insert update delete Using Laravel 5.2 Ajax CRUD laravel without refresh page

Re-enter password validation Javascript

index.html

<html>
<head>
<script>
function pass_validation()
{
var type_SecPass=document.Pakainfo.secure-pass1.value;  
var Retype_SecPass=document.Pakainfo.secure-pass2.value;  
if(type_SecPass==Retype_SecPass){  
return true;  
}  
else{  
alert("password one and two must be same!");  
return false;  
}  
} 
</script>
</head>
<body>
<form name="Pakainfo" action="/JavaScript/Index" onsubmit="return pass_validation()">  
Password:<input type="password" name="secure-pass1" /><br/>  
Re-enter Password:<input type="password" name="secure-pass2"/><br/>  
<input type="submit">  
</form> 
</body>
</html>

Strong password validation in javascript

index.html

<!DOCTYPE html>
<html>
<head>
<title> Strong password validation in javascript </title>
<script>
function validateSecPass(secure-pass) {
if (secure-pass.length === 0) {
document.getElementById("checkMemberId").innerHTML = "";
return;
}
var Pakainfo = new Array();
Pakainfo.push("[[email protected]$!%*#?&]"); // Special Charector
Pakainfo.push("[A-Z]");      // Uppercase Alpabates
Pakainfo.push("[0-9]");      // Numbers
Pakainfo.push("[a-z]");     // Lowercase Alphabates
var ctr = 0;
for (var i = 0; i < Pakainfo.length; i++) {
if (new RegExp(Pakainfo[i]).test(secure-pass)) {
ctr++;
}
}

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("checkMemberId").innerHTML = strength;
document.getElementById("checkMemberId").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="validateSecPass(this.value);"/><span id="checkMemberId"></span>
</div>
</body>
</html>

Don’t Miss : Password and confirm password validation message

I hope you get an idea about password and confirm password validation in html.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.