Steps to add password strength meter in nopCommerce 3.30 register page

I just finished implementing a password strength check meter for nopCommerce registration page as I feel in e-commerce business payment transactions are done, so security issue is very important. In the registration page, password strength checking meter should be there in order to notify user if his/her password is strong enough or not. Today most of the websites use this password strength meter to check the strength of the password.

Why a password strength meter is important?
- To have a strong password that protects our personal information that we share everyday online
- To have a strong password that protects our sensitive information like credit card info, social security, bank account, PIN #s etc

How to create a strong password?
- A strong password should be at least 8 characters long
- A strong password should have special characters
- A strong password should have letters and numbers
- A strong password should have lowercase letters and uppercase letters

- Make a practice of changing your password once in at least 2 months.
- Try to be creative with passwords like instead of using "star", try to use "*" sign or something like "snowflake"
- Avoid using correct spellings. For example: instead of word "effort", you should use "ef4t"

Now, it is time to dive into the code :)

1) In nopCommerce code, the register page is in this location: 
RootFolder\Views\Customer\ Register.cshtml   <-- Open this file

2) Locate this in your code:
<div class="form-fields">
                    <div class="inputs">
                        @Html.LabelFor(model => model.Password, new { }, ":")
                        @Html.EditorFor(model => model.Password)
                        @Html.ValidationMessageFor(model => model.Password)
                    <div class="inputs">
                        @Html.LabelFor(model => model.ConfirmPassword, new { }, ":")
                        @Html.EditorFor(model => model.ConfirmPassword)
                        @Html.ValidationMessageFor(model => model.ConfirmPassword)
                    @if (Model.DisplayCaptcha)
                        <div class="captcha-box">

3) In this case, we need to add javascript, jquery and css in order to target our password  field. So, in order to do that we will add this in our "Register.cshtml" page:

<script type='text/javascript'>
    $(function () {
        // This applies the Strength checking plug-in to your particular element
        $('#Password').strength({ strengthButtonText: "" });
        // Fixup your Required indicator (inserts it explicitly after your password element)

Note: Here the JQuery $('#Password') will reference the password input field.

4) We also need to add respective JQuery like this:

<!-- Example jQuery -->
<script type="text/javascript" src=""></script>

<!-- Strength.js -->
<script type="text/javascript" src=""></script>

Note: "strength.js" is the file where it is defined what is a weak, medium and strong password. You can change it according to your requirements if you want.

5) Now, we will add our CSS styling to it like this:

<style type='text/css'>
    .strength_meter, .strength_meter * {
        display: inline;

6) That's all - You can download t he complete source code for the page Register.cshtml: DOWNLOAD HERE

Here is the result:

P.S. This code is tested and works on nopCommerce 3.30 & 3.40 version

NOTE: In nopCommerce, you can define the minimum length for the password by going:
Administration > Configuration > Settings > All settings 
Find: "customersettings.passwordminlength" and change the "Value"

Hope it helps...

(Source of JQuery file(s):

UPDATE: nopCommerce 3.70 version solution

You need a little different approach to integrate this with nopCommerce 3.70 version (along with a few fixes). Please use this Register.cshtml view if you are using nopCommercee 3.70: DOWNLOAD FILE

About Author

Written By Lavish Kumar

Based out of New York, USA, Lavish Kumar is a full stack web developer by profession and founder of Striving Programmers, a trusted community for developers that offers a wealth of articles and forums to assist individuals with improving their software development skills.

Leave your comment
12/2/2014 2:53 AM
Thank you for this.
* Stated for Nop v3.3, but no mention of v3.4.  
* Only on the registration area, not on the password changing areas under Admin nor Account.
* Wish it had graphical/colored strength meter rather than just text.
12/3/2014 12:21 AM
Thanks for your comments. This solution also works for nopCommerce 3.4v so please feel free to follow same steps on 3.4. With the same steps you can add the password strength meter anywhere even in admin section.

I'll think about writing another article on this based on graphical strength meter so keep an eye here on the website for any updates.
6/27/2019 1:37 PM
Is this available with multi-language responses?
I need a strength meter that will display strength
in French or English depending on the Users
chosen application language