CODEWITHSUNDEEP
javascriptjquery
Raihan
Raihan

Reputation: 4001

Jquery password strength checker issue

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


});

Upvotes: 1

Views: 410

Answers (2)

Gourab Nag
Gourab Nag

Reputation: 1

You could just use the range attribute inside the input tag like And you would save a lot of time and extra coding.

Upvotes: -1

Barmar
Barmar

Reputation: 780655

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

Upvotes: 2

Related Questions