Magento Expert Forum - Improve your Magento experience

Results 1 to 3 of 3

The password strength meter for magento form

  1. #1
    Junior Member ccvv's Avatar
    Join Date
    Mar 2013
    Posts
    64
    Thanks
    6
    Thanked 17 Times in 13 Posts

    Thumbs up The password strength meter for magento form

    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

    HTML Code:
    <div id="password-strength-container" style="display:none">
     <div id="password-strength-text" style= "font-weight:bold">
     </div>
     
    <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.

    HTML Code:
    <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.



    Compatability: Magento 1.6

    View more threads in the same category:


  2. #2
    Junior Member Cms_ideas's Avatar
    Join Date
    Jun 2014
    Location
    https://cmsideas.net
    Posts
    385
    Thanks
    1
    Thanked 7 Times in 7 Posts

    Default

    What is????

  3. #3
    Junior Member
    Join Date
    Sep 2017
    Posts
    47
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Default

    Thanks for sharing the informative post. This is very useful to implement the password strength.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •