Comparing retyped password with first time entered password

Password :

  • Password Conditions
  • One Upper Case Letter
  • One Lower Case Letter
  • One Special Char
  • One Number
  • Length 8 Char
Password (retype):








CSS


.list-group{
    z-index:10;display:none; 
	position:absolute; 
    color:red;
}
.msg
{
	position:absolute; 
    color:red;
}

HTML


<div class="row">
  <div class="col-md-4">Password : <input type=password name=my_text id=t1><br><br><div id=display_box class=msg></div></div>
  <div class="col-md-4">
<ul  id="d1" class="list-group">
<li class="list-group-item list-group-item-success">Password Conditions</li>
<li class="list-group-item" id=d12><span class='glyphicon glyphicon-remove' aria-hidden='true'></span> One Upper Case Letter</li>
<li class="list-group-item" id=d13 ><span class='glyphicon glyphicon-remove' aria-hidden='true'></span> One Lower Case Letter </li>
<li class="list-group-item" id=d14><span class='glyphicon glyphicon-remove' aria-hidden='true'></span> One Special Char </li>
<li class="list-group-item" id=d15><span class='glyphicon glyphicon-remove' aria-hidden='true'></span> One Number</li>
<li class="list-group-item" id=d16><span class='glyphicon glyphicon-remove' aria-hidden='true'></span> Length 8 Char</li>
</ul>

</div></div>

<div class="row">
  <div class="col-md-3">Password (retype): 
<input type=password class='form-control' name=t2 id=password2> </div>
  <div class="col-md-4"><br><div id=msg_password2></div></div></div>

jquery


<script>
$(document).ready(function() {
////////////////////
$('#t1').keyup(function(){
var str=$('#t1').val();
var upper_text= new RegExp('[A-Z]');
var lower_text= new RegExp('[a-z]');
var number_check=new RegExp('[0-9]');
var special_char= new RegExp('[!/\'^$%&*()}{@#~?><>,|=_+-\]');

var flag='T';

if(str.match(upper_text)){
$('#d12').html("<span class='glyphicon glyphicon-ok' aria-hidden='true'></span> One Upper Case Letter ");
$('#d12').css("color", "green");
}else{$('#d12').css("color", "red");
$('#d12').html("<span class='glyphicon glyphicon-remove' aria-hidden='true'></span> One Upper Case Letter ");
flag='F';}

if(str.match(lower_text)){
$('#d13').html("<span class='glyphicon glyphicon-ok' aria-hidden='true'></span> One Lower Case Letter ");
$('#d13').css("color", "green");
}else{$('#d13').css("color", "red");
$('#d13').html("<span class='glyphicon glyphicon-remove' aria-hidden='true'></span> One Lower Case Letter ");
flag='F';}

if(str.match(special_char)){
$('#d14').html("<span class='glyphicon glyphicon-ok' aria-hidden='true'></span> One Special Char ");
$('#d14').css("color", "green");
}else{
$('#d14').css("color", "red");
$('#d14').html("<span class='glyphicon glyphicon-remove' aria-hidden='true'></span> One Special Char ");
flag='F';}

if(str.match(number_check)){
$('#d15').html("<span class='glyphicon glyphicon-ok' aria-hidden='true'></span> One Number ");
$('#d15').css("color", "green");
}else{
$('#d15').css("color", "red");
$('#d15').html("<span class='glyphicon glyphicon-remove' aria-hidden='true'></span> One Number ");
flag='F';}


if(str.length>7){
$('#d16').html("<span class='glyphicon glyphicon-ok' aria-hidden='true'></span> Length 8 Char ");

$('#d16').css("color", "green");
}else{
$('#d16').css("color", "red");
$('#d16').html("<span class='glyphicon glyphicon-remove' aria-hidden='true'></span> Length 8 Char ");

flag='F';}


if(flag=='T'){
$("#d1").fadeOut();
$('#display_box').css("color","green");
$('#display_box').html("<span class='glyphicon glyphicon-ok' aria-hidden='true'></span> "+str);
}else{
$("#d1").show();
$('#display_box').css("color","red");
$('#display_box').html("<span class='glyphicon glyphicon-remove' aria-hidden='true'></span> "+str);
}
});
///////////////////
$('#t1').blur(function(){
$("#d1").fadeOut();
});
///////////
$('#t1').focus(function(){
$("#d1").show();
});
////////////
$('#password2').on('focus blur keyup',function(){
	if(($('#t1').val() != $('#password2').val()) || $('#password2').val().length <1){
		
$('#password2').closest('.form-group').removeClass('has-success');
$('#password2').closest('.form-group').addClass('has-error');

$('#msg_password2').removeClass('bg-success').addClass('bg-danger');
$('#msg_password2').addClass('bg-danger');
$('#msg_password2').html('Both passwords Not matching');
	}else{
		$('#password2').closest('.form-group').removeClass('has-error');
$('#password2').closest('.form-group').addClass('has-success');
		$('#msg_password2').removeClass('bg-danger').addClass('bg-success');
		$('#msg_password2').html("<span class='glyphicon glyphicon-ok' aria-hidden='true'></span>Matching");
	}
});
////////
})
</script>