How to add a jQuery Password Strength Checker on register page in Shopify store?

Password strength checker is very important for your signup form. It lets you know the intensity of your password, whether it is weak or strong. If it is weak, you need to modify and make it stronger.

In this example you will learn how to create a strength checker in jQuery with four stages of strength – “Too short, Weak, Good, Strong” init. That enables anyone to choose it with high authority and relevancy...

Remember, a strong password is unbreakable and untraceable.

Before starting with the codes, I want to tell you some basic conditions that calculates the password strength. They are:

• Length.
• Use of special Characters like, [@, $].
• Use of uppercase [A – Z] and lowercase [a – z] letters.
• Use of numbers [0 – 9].

Step 1: Open your theme code editor and search for customers/register.liquid

Step 2: Find input field of password and add this line of code 

            id="password" onKeyUp="checkPasswordStrength();"

Step 3: Add this line of code below password input field and save this file

            <div id="uos-password-check"></div><br>

Step 4: Open theme.js file and write these line of code end of the file and save it

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        function checkPasswordStrength() {
            var number = /([0-9])/;
            var alphabets = /([a-zA-Z])/;
            var special_characters = /([~,!,@,#,$,%,^,&,*,-,_,+,=,?,>,<])/;
            if ($('#password').val().length < 6) {
                $('#uos-password-check').removeClass();
                $('#uos-password-check').addClass('weak-password');
                $('#uos-password-check').html("Weak (should be atleast 6 characters.)");
            } else {
                if ($('#password').val().match(number) && $('#password').val().match(alphabets) && $('#password').val().match(special_characters)) {
                    $('#uos-password-check').removeClass();
                    $('#uos-password-check').addClass('strong-password');
                    $('#uos-password-check').html("Strong");
                } else {
                    $('#uos-password-check').removeClass();
                    $('#uos-password-check').addClass('medium-password');
                    $('#uos-password-check').html("Medium (should include alphabets, numbers and special characters.)");
                }
            }
        }
  </script>

Step 5: Open theme.css or theme.scss.liquid file and write these line of code end of the file and save it.

//uos-password-check css
#uos-password-check {
padding: 5px 10px;
color: #FFFFFF;
border-radius: 4px;
margin-top: 5px;
}

.medium-password {
background-color: #b7d60a;
border: #BBB418 1px solid;
}

.weak-password {
background-color: #ce1d14;
border: #AA4502 1px solid;
}

.strong-password {
background-color: #12CC1A;
border: #0FA015 1px solid;
}


Demo Link

Try Shopify for free, and explore all the tools and services you need to start, run, and grow your business.