Checking Password Confirm Password Match And Password Poor Or Strong While Typing

Check Password Confirm Password While Typing Using JavaScript
Check Password Confirm Password While Typing Using JavaScript



Demo



Download Code

My previous article gives you an understanding of how to Check If A User Exists In Database Or Not Using JScript Or Ajax. But, mere implementation of user exist is not enough for making it more effective. It requires a proper authentication and more security. Here is the article for a secured password or confirm password on frontent. Follow the demo below for your reference.

Jquery Code

Contains javascipt code txtNewPassword id is use for first input field where we use div id=txtNewPassword and txtConfirmPassword is use another input field for the output we are use divCheckPasswordMatch id for after onclick function it will work and show what we want to showing

<script type=”text/javascript”><!–
function checkPasswordMatch() {
var password = document.getElementById(“txtNewPassword”).value;
var confirmPassword = document.getElementById(“txtConfirmPassword”).value;
if(password.length<=5)
{

$(“#divCheckPasswordMatch”).html(“<i class=’fa fa-close’></i>Poor Password!”);
$(‘#txtNewPassword’).val(”);
$(‘#txtConfirmPassword’).val(”);
}

else if (password != confirmPassword)
{
$(“#divCheckPasswordMatch”).html(“<i class=’fa fa-close’></i>Passwords do not match!”);
$(‘#txtNewPassword’).val(”);
$(‘#txtConfirmPassword’).val(”);
}

else
{
$(“#divCheckPasswordMatch”).html(“<i class=’fa fa-check’></i>Passwords match.”);
}
}
//–>

</script>

index.html

Contains HTML code, if password or confirm password not same it showing message Passwords do not match and if password length is less then 5 it showing poor password message. in the input we are using onfocusout function which is working when we enter the value in input form and after that we leave input field or when an input field is about to lose focus

<table width=”645″ border=”1″>
<tr>
<td>Passowrd</td>
<td> <input type=”password” name=”pass1″ class=”form-control” id=”txtNewPassword” placeholder=”Password*” required></td>
</tr>
<tr>
<td>Confirm Password</td>
<td> <input type=”password” name=”pass2″ class=”form-control” id=”txtConfirmPassword” onfocusout=”checkPasswordMatch()” placeholder=”Re-type Password*” required>
</td>
</tr>
<tr>
<td><div id=”divCheckPasswordMatch”></div></td>
<td><input type=”submit” value=”Signup” /></td>
</tr>
</table>

One Comment

  1. lucillemccarten said:

    Having reаd this I believed it was rаther enlightening. I apreciate ʏou
    spending ѕome time and energy tο put thіs article togethеr.
    I oncе аgain find mʏseⅼf personally spending a signifіcɑnt amоunt of
    time both reading and commenting. Βut so what, it was stilⅼ worthwhile!

    January 2, 2018
    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*

code