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:
Bookmarks