Adding a simple magento password strength meter in form

By

August 5, 2013Magento4 Comments

Magento Password strength meter brings user interaction with forms. Magento provides built in support for form validation. However if it provides a nice Interactive validation response it would increase the user experience. Lets say while creating a password it would be nice if the user gets to know about the strength of his password.

So we write a simple javascript function to achieve this functionality in the customer registration form.

Step 1: First we add the required UI Elements under the password Field. A Few div tags to show the password strength messages as shown below

<div id="password-strength-container" style="display:none">
  <div id="password-strength-text" style= "font-weight:bold">
  </div>
  <div id="password-indicator" style="background: #C4C4C4; height: 0.5em;width: 100%;>
  <div id="strength-indicator" style="width: 10%; height: 0.5em;"></div> 
  </div>
</div>

 

Step 2: Now We need to Write the actual javascript function. Since magento uses the prototype javascript
library we follow the prototype style code implementation.

Step 3: Our Custom Javascript code will be implemented under the form tag. First we need to handle the Events. Whenever a User enters some value in the password field our function should get executed.

<script type="text/javascript">
Event.observe("password","keydown", function() {
  $("password-strength-container").show();
  var passinput = $("password").value;
  if(passinput.length < 6) {
   $("password-strength-text").update("Weak");
   $("strength-indicator").setStyle({
         backgroundColor: '#EB34OA',
         width: '15%'
    });
} 
 else if( passinput.length > 6 && passinput.match(/[^a-zA-Z0-9] +/) ) {
     $("password-strength-text").update("Strong");
   $("strength-indicator").setStyle({
         backgroundColor: '#47C965',
         width: '75%'
    });
  }
 else {
 $("password-strength-text").update("Medium");
   $("strength-indicator").setStyle({
         backgroundColor: '#FFFF00',
         width: '35%'
    });
}

});
Event.observe("password","keydown", function() {
  $("password-strength-container").hide();
 });
 
</script>

 

Step 4: The above code snippet gives hints about the strength of the password he entered. if the password contains less than 6 characters it would indicate the password strength as Weak, if the password is more than 6 characters and also have lower case and uppercase characters with numeric digits it is considered as strong password.

password-checker-output

Compatability: Magento 1.6

  • http://www.fachtopia.com/ Juan Fach

    Hi Ramesh

    Maybe for a better understanding and avoid confusion would be nice to define path and in which files this should be add it. If you consider this articles HOWTO’s, right?

    • http://mydons.com/author/ramesh/ Ramesh

      Hi Juan, It is not a full fledged module Just a template file modification. There is no specific JS files involved, all you have to do is to add the Javascript
      under the form tag of your customer registration template file. It is specified in Step 3 too. But anyway the post will be updated with syntax highlighter soon.

  • Rod

    useless without at least providing where to put the JS…
    And why do you put the code as picture?
    If you don’t want to share, then don’t share at all!!

    • http://mydons.com/author/ramesh/ Ramesh

      Hi Rod, Sorry for the inconvenience at the time of writing this post there was some problem with the Syntax Highlighter. To Show the code with clarity i used image screenshot. Now the problem is fixed will soon update for the older post like this.