Registration: Password Requirement

Your plugin is awesome!

It would be great to get an instant feedback if your entered password requires several requirements (see screenshot).

I managed to do some by adding an HTML field [id=77] with the following code:
<style>
#frm_field_77_container {
display: none;
line-height: 1;
background:#fefefe;
font-size:.875em;
border-radius:5px;
box-shadow:0 1px 3px #ccc;
border:1px solid #ddd;
margin-left: 0
}
#frm_field_77_container>p {
margin-top: 10px;
margin-bottom: 10px;
}
#frm_field_77_container>p#ok {
display: none
}
.invalid {
background:url(../images/invalid.png) no-repeat 0 50%;
padding-left:22px;
color:#ec3f41;
}
.valid {
background:url(../images/valid.png) no-repeat 0 50%;
padding-left:22px;
color:#3a7d34;
}
</style>
<p id="capital" class="invalid">At least <strong>one capital letter</strong></p>
<p id="length" class="invalid">Be at least <strong>8 characters</strong></p>
<p id="equal" class="invalid"><strong>must be equal</strong></p>
<p id="ok" class="valid"><strong>Password OK!</strong></p>

<!--
<p id="letter" class="invalid">At least <strong>one letter</strong></p>
<p id="number" class="invalid">At least <strong>one number</strong></p> -->
 

<script>
jQuery(document).ready(function($) {
/*Check Password*/
$('input#field_password, input#field_conf_password').keyup(function() {
var pswd = $('input#field_password').val();
var confpswd = $('input#field_conf_password').val();
var lengthOK;
var capitalOK;
var matchOK;
//validate the length
if ( pswd.length < 8 ) {
$('#length').removeClass('valid').addClass('invalid');
var lengthOK = false;
} else {
$('#length').removeClass('invalid').addClass('valid');
var lengthOK = true;
}
//validate capital letter
if ( pswd.match(/[A-Z]/) ) {
$('#capital').removeClass('invalid').addClass('valid');
var capitalOK = true;
} else {
$('#capital').removeClass('valid').addClass('invalid');
var capitalOK = false;
}
if ( pswd == confpswd && pswd !== "") {
$('#equal').removeClass('invalid').addClass('valid');
var matchOK = true;
} else {
$('#equal').removeClass('valid').addClass('invalid');
var matchOK = false;
}
if (lengthOK && capitalOK && matchOK) {
$('#frm_field_77_container>p').hide();
$('#frm_field_77_container>p#ok').show();
} else {
$('#frm_field_77_container>p').show();
$('#frm_field_77_container>p#ok').hide();
}
//validate number NOT WORKING
/*if ( pswd.match(/d/) ) {
$('#number').removeClass('invalid').addClass('valid');
} else {
$('#number').removeClass('valid').addClass('invalid');
//validate letter
if ( pswd.match(/[A-z]/) ) {
$('#letter').removeClass('invalid').addClass('valid');
} else {
$('#letter').removeClass('valid').addClass('invalid')
}*/
}).focus(function() {
$('#frm_field_77_container').show()
}).blur(function() {
$('#frm_field_77_container').hide();
});
});
</script>

Feel free to use this code, if you plan to implement this feature

Demo: https://dercampus.ch/register/

You'll find a great tutorial for this purpose here: http://www.webdesignerdepot.com/2012/01/password-strength-verification-with-jquery/