Jquery password strength checker issue

Question

I have a jquery password live validation form HERE

Example from Js Fiddle

This example guides to add proper password. When all the requirements satisfied it turns into green and the guide Tool tip Hides which is very Good. Thanks to j08691l for upto this.

But I am facing one issue like after satisfying the conditions when the tool tip popup hides it's not came back when I use backspace and want to remove.

So is this possible If I use backspace after hiding the tool tip Pop and it's again show up with all the conditions in Red color which are removed and with Green Color which are not removed?

JS:

$(document).ready(function () {
    $('input[type=password]').keyup(function () {
        // set password variable
        var pswd = $(this).val();
        if (pswd.length < 8) {
            $('#length').removeClass('valid').addClass('invalid');
        } else {
            $('#length').removeClass('invalid').addClass('valid');
        }
        //validate letter
        if (pswd.match(/[A-z]/)) {
            $('#letter').removeClass('invalid').addClass('valid');
        } else {
            $('#letter').removeClass('valid').addClass('invalid');
        }
        //validate capital letter
        if (pswd.match(/[A-Z]/)) {
            $('#capital').removeClass('invalid').addClass('valid');
        } else {
            $('#capital').removeClass('valid').addClass('invalid');
        }

        //validate number
        if (pswd.match(/\d/)) {
            $('#number').removeClass('invalid').addClass('valid');
        } else {
            $('#number').removeClass('valid').addClass('invalid');
        }

        if ($('#pswd_info li.valid').length == 4) $('#pswd_info').fadeOut();
    });
    $('input[type=password]').focus(function () {
        // focus code here
    });
    $('input[type=password]').blur(function () {
        // blur code here
    });

    $('input[type=password]').keyup(function () {

        // keyup code here
    }).focus(function () {
        $('#pswd_info').show();
    }).blur(function () {
        $('#pswd_info').hide();
    });


}); 

Answer 1

You need:

    if ($('#pswd_info li.valid').length == 4) {
        $('#pswd_info').fadeOut();
    } else {
        $('#pswd_info').fadeIn();
    }

You're never fading the info in if the validation criteria are not met.

Actually, I suggest inverting the condition, so you don't need to hard-code the number of conditions:

    if ($('#pswd_info li.invalid').length == 0) {
        $('#pswd_info').fadeOut();
    } else {
        $('#pswd_info').fadeIn();
    }

DEMO

Answer 2

您可以只使用输入标签内的range属性，例如And，您可以节省大量时间和额外的编码。