jQuery form validation with password strength check

Question

I had a basic knowledge of jQuery. I currently working on jQuery form validation with password strength check. I had finished the password strength check part but I don't know how to enable the submit button after the condition satisfied.

Here is my code:https://codepen.io/jagan/pen/rzZqMq

Answer 1

Check the below code, you used global javascript variable to validate the password which was initialized with false.

 function checkStrength(password){
      var valid = true;
        var strength = 0;


        //If password contains both lower and uppercase characters, increase strength value.
        if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) {
             strength += 1 ;
             $('.low-upper-case').addClass('text-success');

        }
        else{
            $('.low-upper-case').removeClass('text-success');
             valid = false;
        }

        //If it has numbers and characters, increase strength value.
        if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)){
            strength += 1;
            $('.one-number').addClass('text-success'); 

        } 
        else{
            $('.one-number').removeClass('text-success');
             valid = false;
        } 

        //If it has one special character, increase strength value.
        if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) {
            strength += 1;
            $('.one-special-char').addClass('text-success');

        }
        else{
            $('.one-special-char').removeClass('text-success');
             valid = false;
        }

        if (password.length > 7){
         strength += 1;
         $('.eight-character').addClass('text-success');

        }
        else{
            $('.eight-character').removeClass('text-success');
            valid = false;
        }
         if (valid){
        $('#sign-up').prop("disabled", false);   
        }



    }

Answer 2

you can use disable enable for the button depending on the status bar , easy fast solve for issue but i believe if you want to make it more generic and solid you can depend on flag that set false if the validation dirty or switch it to true only if the validation behavior the way you want

$(document).ready(function(){  
    $('#password').keyup(function(){
        var valid = true; 
        $('#result').html(checkStrength($('#password').val()));
                //Calculated strength value, we can return messages
        if( !valid){
            alert('errorMessage');
           }

    });  


    function checkStrength(password){
        var strength = 0;


        //If password contains both lower and uppercase characters, increase strength value.
        if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) {
             strength += 1 ;
             $('.low-upper-case').addClass('text-success');

        }
        else{
            $('.low-upper-case').removeClass('text-success');
             valid = false;
        }

        //If it has numbers and characters, increase strength value.
        if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)){
            strength += 1;
            $('.one-number').addClass('text-success'); 

        } 
        else{
            $('.one-number').removeClass('text-success');
             valid = false;
        } 

        //If it has one special character, increase strength value.
        if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) {
            strength += 1;
            $('.one-special-char').addClass('text-success');

        }
        else{
            $('.one-special-char').removeClass('text-success');
             valid = false;
        }

        if (password.length > 7){
         strength += 1;
         $('.eight-character').addClass('text-success');

        }
        else{
            $('.eight-character').removeClass('text-success');
            valid = false;
        }




       // If value is less than 2

        if (strength < 2 )
        {
            $('#result').removeClass()
            $('#password-strength').addClass('progress-bar-danger');
            $('#result').addClass('text-danger')
            $('#password-strength').css('width', '10%');
            $("#sign-up").attr("disabled",true)
            return 'Very Weak'           
        }
        else if (strength == 2 )
        {
            $('#result').removeClass()
            $('#result').addClass('good');
            $('#password-strength').removeClass('progress-bar-danger');
            $('#password-strength').addClass('progress-bar-warning');
            $('#result').addClass('text-warning')
            $('#password-strength').css('width', '60%');
           $("#sign-up").attr("disabled",true)
            return 'Week'       
        }
        else if (strength == 4)
        {
            $('#result').removeClass()
            $('#result').addClass('strong');
            $('#password-strength').removeClass('progress-bar-warning');
            $('#password-strength').addClass('progress-bar-success');
            $('#result').addClass('text-success');
            $('#password-strength').css('width', '100%');
            $("#sign-up").attr("disabled",false)
            return 'Strong'
        }

    }

        // if (passwordStatus == true){
        // $('#sign-up').prop("disabled", false);   
        // }
});