"Change Password Form (With Validation)"
Bootstrap 3.1.0 Snippet by jasonsyko

<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"> <h1>Change Password</h1> </div> </div> <div class="row"> <div class="col-sm-6 col-sm-offset-3"> <p class="text-center">Use the form below to change your password. Your password cannot be the same as your username.</p> <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> <span id="ucase" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> One Uppercase Letter </div> <div class="col-sm-6"> <span id="lcase" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> One Lowercase Letter<br> <span id="num" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> One Number </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> <input type="submit" class="col-xs-12 btn btn-primary btn-load btn-lg" data-loading-text="Changing Password..." value="Change Password"> </form> </div><!--/col-sm-6--> </div><!--/row--> </div>
$("input[type=password]").keyup(function(){ var ucase = new RegExp("[A-Z]+"); var lcase = new RegExp("[a-z]+"); var num = new RegExp("[0-9]+"); 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(ucase.test($("#password1").val())){ $("#ucase").removeClass("glyphicon-remove"); $("#ucase").addClass("glyphicon-ok"); $("#ucase").css("color","#00A41E"); }else{ $("#ucase").removeClass("glyphicon-ok"); $("#ucase").addClass("glyphicon-remove"); $("#ucase").css("color","#FF0004"); } if(lcase.test($("#password1").val())){ $("#lcase").removeClass("glyphicon-remove"); $("#lcase").addClass("glyphicon-ok"); $("#lcase").css("color","#00A41E"); }else{ $("#lcase").removeClass("glyphicon-ok"); $("#lcase").addClass("glyphicon-remove"); $("#lcase").css("color","#FF0004"); } if(num.test($("#password1").val())){ $("#num").removeClass("glyphicon-remove"); $("#num").addClass("glyphicon-ok"); $("#num").css("color","#00A41E"); }else{ $("#num").removeClass("glyphicon-ok"); $("#num").addClass("glyphicon-remove"); $("#num").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"); } });

Related: See More


Questions / Comments:

soooo cooooooooooool

Rulli Wuji Wijianto () - 2 years ago - Reply 0


nice job
I just add this line on compare password section, because when clear the first password the icon of the second password not refresh.

if ($("#password1").val() != "" || $("#password2").val() != "") {
if ($("#password1").val() == $("#password2").val()) {
....
....
....
}
}

best regards

Milicomvp () - 3 years ago - Reply 0


Converted this to a prototype.js version for anyone working on legacy stuff.

$$("input[type=password]").invoke('observe','keyup', function(){
var ucase = new RegExp("[A-Z]+");
var lcase = new RegExp("[a-z]+");
var num = new RegExp("[0-9]+");

if($$("#field-UserPassword")[0].value.length >= 8){
$$("#8char").invoke("removeClassName", "glyphicon-remove");
$$("#8char").invoke("addClassName", "glyphicon-ok");
$$("#8char").invoke("setStyle", {color: "#00A41E"});
}else{
$$("#8char").invoke("removeClassName", "glyphicon-ok");
$$("#8char").invoke("addClassName", "glyphicon-remove");
$$("#8char").invoke("setStyle", {color: "#FF0004"});
}

if(ucase.test($$("#field-UserPassword")[0].value)){
$$("#ucase").invoke("removeClassName", "glyphicon-remove");
$$("#ucase").invoke("addClassName", "glyphicon-ok");
$$("#ucase").invoke("setStyle", {color: "#00A41E"});
}else{
$$("#ucase").invoke("removeClassName", "glyphicon-ok");
$$("#ucase").invoke("addClassName", "glyphicon-remove");
$$("#ucase").invoke("setStyle", {color: "#FF0004"});
}

if(lcase.test($$("#field-UserPassword")[0].value)){
$$("#lcase").invoke("removeClassName", "glyphicon-remove");
$$("#lcase").invoke("addClassName", "glyphicon-ok");
$$("#lcase").invoke("setStyle", {color: "#00A41E"});
}else{
$$("#lcase").invoke("removeClassName", "glyphicon-ok");
$$("#lcase").invoke("addClassName", "glyphicon-remove");
$$("#lcase").invoke("setStyle", {color: "#FF0004"});
}

if(num.test($$("#field-UserPassword")[0].value)){
$$("#num").invoke("removeClassName", "glyphicon-remove");
$$("#num").invoke("addClassName", "glyphicon-ok");
$$("#num").invoke("setStyle", {color: "#00A41E"});
}else{
$$("#num").invoke("removeClassName", "glyphicon-ok");
$$("#num").invoke("addClassName", "glyphicon-remove");
$$("#num").invoke("setStyle", {color: "#FF0004"});
}

if($$("#field-UserPassword")[0].value == $$("#field-UserPasswordConf")[0].value && $$("#field-UserPassword")[0].value !== ""){
$$("#pwmatch").invoke("removeClassName", "glyphicon-remove");
$$("#pwmatch").invoke("addClassName", "glyphicon-ok");
$$("#pwmatch").invoke("setStyle", {color: "#00A41E"});
}else{
$$("#pwmatch").invoke("removeClassName", "glyphicon-ok");
$$("#pwmatch").invoke("addClassName", "glyphicon-remove");
$$("#pwmatch").invoke("setStyle", {color: "#FF0004"});
}

if ($$('span.glyphicon-remove').length != 0) {
$$('input[type=submit]').disable();
} else {
$$('input[type=submit]').enable();
}

});

Brandon () - 3 years ago - Reply 0


I was having problems making it work. What worked for me was wrapping the entire .js like this:

$(document).ready(function(){

$("input[type=password]").keyup(function(){
... //THE REST OF THE .JS FILE ...
$("#pwmatch").css("color","#FF0004");
};
});

});

Hope it helps someone :).

Luxedrina () - 4 years ago - Reply 0


This helped me

Thulasizwe Mkhwanazi () - 2 years ago - Reply 0


Is there any css?

AZZZZ () - 4 years ago - Reply 0


The CSS is from default Bootstrap (you can get it at getbootstrap.com)

maxsurguy () - 4 years ago - Reply 0


Thanks alot great job

Jaffar Hussain () - 4 years ago - Reply 0


same problem. dont work.

cyprien () - 4 years ago - Reply 0


try to put this line first and all the script inside
$(function () {

$("input[type=password]").keyup(function () {
var ucase = new RegExp("[A-Z]+");
var lcase = new RegExp("[a-z]+");
var num = new RegExp("[0-9]+");

...
...
...
....

});// end class

Milicomvp () - 3 years ago - Reply 0


include jquery in your page before the javascript

Jaffar Hussain () - 4 years ago - Reply 0


is der any error in this code?
i tired but its not working.

nice () - 4 years ago - Reply 0


nice work :)

gheith () - 5 years ago - Reply 0