Wednesday, October 20, 2010

Password strength meter in APEX

Step-1:
On page HTML Header write the following code

<style>
#passwordStrength
{
        height:10px;
        display:block;
        float:left;
}
.strength0
{
        width:250px;
        background:#cccccc;
}
.strength1
{
        width:50px;
        background:#ff0000;
}
.strength2
{
        width:100px;   
        background:#ff5f5f;
}
.strength3
{
        width:150px;
        background:#56e500;
}
.strength4
{
        background:#4dcd00;
        width:200px;
}
.strength5
{
        background:#399800;
        width:250px;
}
</style>
Step-2:
On password item P10_PASSWORD

 HTML Form element attribute: onkeyup="return passwordChanged();"

Step-3:
Create an item  P10_PASSWORD_STRENGTH on right side of password item.

Display As: Display as text(escape special characters, does not save state)
Pre Element Text: 
<script language="javascript">
function passwordChanged(){
var pwd = document.getElementById('P10_PASSWORD_STRENGTH');
var password = document.getElementById("P10_PASSWORD").value;
var desc = new Array();
        desc[0] = "Very Weak";
        desc[1] = "Weak";
        desc[2] = "Better";
        desc[3] = "Medium";
        desc[4] = "Strong";
        desc[5] = "Strongest";
        var score   = 0;
        if (password.length > 6) score++;
        if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;
        if (password.match(/\d+/)) score++;
        if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) score++;
        if (password.length > 12) score++;
        document.getElementById("passwordDescription").innerHTML = desc[score];
        if (password.length==0) {
             document.getElementById("passwordDescription").innerHTML  = 'Password not entered';
       }
      document.getElementById("passwordStrength").className = "strength" + score;
}
</script>
Post Element Text:
<div id="passwordDescription">Password not entered</div>
<div id="passwordStrength" class="strength0">
</div>

Demo Example:  http://apex.oracle.com/pls/apex/f?p=KP:PSM

Refer http://www.codeassembly.com/How-to-make-a-password-strength-meter-for-your-register-form for more info.

Final output:



Thanks




4 Comments:

Blogger Sohil Bhavsar said...

Thanks for the update Kartik.

-

Sohil

Oct 20, 2010, 11:35:00 AM  
Anonymous Anonymous said...

congratulations on your website!!

Oct 19, 2011, 2:36:00 PM  
Blogger Kartik Patel said...

Thanks.....

Oct 19, 2011, 2:52:00 PM  
Blogger Frantisek Mika said...

Kartik, thank for your great post!
Frantisek

Oct 27, 2016, 5:18:00 PM  

Post a Comment

Subscribe to Post Comments [Atom]

<< Home