soooo cooooooooooool

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

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();
}

});

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 :).

I put those lines but password not getting validated during typing . Any suggestions?

I put those lines but password not getting validated during typing . Any suggestions?

This helped me

Is there any css?

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

Thanks alot great job

same problem. dont work.

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

include jquery in your page before the javascript

why password not validating during typing even after adding jquery ?

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

nice work :)