<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-sm-12"> </div> </div> <div class="row"> <div class="col-sm-6 col-sm-offset-3"> <form method="post" id="passwordForm"> <input type="password" class="input-lg form-control" name="password1" id="password1" placeholder="New Password" autocomplete="off"> <div class="row"> <div class="col-sm-6"> <span id="8char" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> 8 Characters Long<br> </div> </div> <input type="password" class="input-lg form-control" name="password2" id="password2" placeholder="Repeat Password" autocomplete="off"> <div class="row"> <div class="col-sm-12"> <span id="pwmatch" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> Passwords Match </div> </div> </form> </div><!--/col-sm-6--> </div><!--/row--> </div>

$(document).ready(function(){ $("input[type=password]").keyup(function(){ if($("#password1").val().length >= 8){ $("#8char").removeClass("glyphicon-remove"); $("#8char").addClass("glyphicon-ok"); $("#8char").css("color","#00A41E"); }else{ $("#8char").removeClass("glyphicon-ok"); $("#8char").addClass("glyphicon-remove"); $("#8char").css("color","#FF0004"); } if($("#password1").val() == $("#password2").val()){ $("#pwmatch").removeClass("glyphicon-remove"); $("#pwmatch").addClass("glyphicon-ok"); $("#pwmatch").css("color","#00A41E"); }else{ $("#pwmatch").removeClass("glyphicon-ok"); $("#pwmatch").addClass("glyphicon-remove"); $("#pwmatch").css("color","#FF0004"); } });});