Hide the Tool tip popup after all condition are fulfilled

Question

I have a jquery password live validation form HERE

This example guides to add proper password and show with red and green sign.

But I am wanting something like when all the conditions of password are successful then popup tool tip will automatically disappear.

How can this possible. I am not good at jquery, any help will be much appreciated.

live JS fiddle link

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


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

One way would be to count the number of valid rules and when you reach the appropriate number, fade the rules out:

if ($('#pswd_info li.valid').length == 4) $('#pswd_info').fadeOut();

jsFiddle example

Answer 2

This will work inside of your keyup() function:

if(pswd.length >= 8 && pswd.match(/[A-z]/) && pswd.match(/\d/)) {
    $('#pswd_info').hide();
}

Updated JSFiddle

Answer 3

Here is a working version ( jsfiddle ):

$(document).ready(function() {


    $('input[type=password]').keyup(function() {
        var isValid = true;

        // set password variable
        var pswd = $(this).val();
        if ( pswd.length < 8 ) {
                        isValid &= false;
                        $('#length').removeClass('valid').addClass('invalid');
            } else {
                        isValid &= true;
                        $('#length').removeClass('invalid').addClass('valid');
            }


                    //validate letter
            if ( pswd.match(/[A-z]/) ) {
                        isValid &= true;
                        $('#letter').removeClass('invalid').addClass('valid');
            } else {
                isValid &= false;
                        $('#letter').removeClass('valid').addClass('invalid');
            }

            //validate capital letter
            if ( pswd.match(/[A-Z]/) ) {
                         isValid &= true;
                         $('#capital').removeClass('invalid').addClass('valid');
            } else {
                         isValid &= false; 
                         $('#capital').removeClass('valid').addClass('invalid');
            }

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

                    if(isValid){
                        $('#pswd_info').hide();
                    }

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


});