Strength Meter Demo strength-meter

Thankful to Krajee!
to get more out of us.

NOTE: The plugins on this site, strive to use a lot of CSS3 and HTML5 features in addition to JQuery. Hence, one may find either CSS3, HTML5 or a mix of both to achieve a plugin's requirements in many implementations.

A JQuery plugin that converts a password input into an advanced widget with strength validation meter and toggle mask to show/hide the password. The password strength is validated as you type.

Automatically convert a password input to a strength meter plugin by setting its class as strength

Initialize strength meter plugin on a password input via javascript

Set the strength meter plugin to be readonly or disabled

Use data attributes to control options. For example, hide/show display of toggle mask and strength meter.
// Automatically convert a password input to a strength meter plugin
// by setting its class as 'strength'
<input id="input-1" type="password" class="strength">

// Initialize strength meter plugin on a password input via javascript
<input id="input-2" type="password">
/* Javascript call to initialize plugin with your desired options */
$("#input-2").strength(); 

// Set the strength meter plugin to be readonly or disabled
 <input id="input-3a" type="password" class="strength" readonly="true">
 <input id="input-3b" type="password" class="strength" disabled="true">
 
// Use data attributes to control options. For example, hide/show display of 
// toggle mask and strength meter.
<input id="input-4" type="password" class="strength" data-toggle-mask="true" data-show-meter="false">

Modifying input template. Change the style, size of the input, and positioning of the toggle mask checkbox

Customize your strength verdict titles and verdict CSS classes.


Reset your input and strength to initial value when form is reset.

Plugin Methods. Dynamically set password via javascript and refresh strength meter. Click the "Assign" button.


Plugin Methods. Return the current score and verdict via javascript. Click the "Show" button.
// Modifying input template. Change the style, size of the input, and positioning of 
// the toggle mask checkbox.
<input id="input-30" type="password">
// call this javascript on document ready
$("#input-30").strength({inputTemplate: 
    '<div class="input-group input-group-lg">\n' + 
    '    <span class="input-group-addon">\n' +
    '        {toggle}\n' +
    '    </span>\n' +
    '    {input}\n' + 
    '</div>'
});

// Customize your strength verdict titles and verdict CSS classes.
<input id="input-30" type="password">
// call this javascript on document ready
$("#input-31").strength({
    verdictTitles: {
        0: 'Not Set',
        1: 'Very Poor',
        2: 'Poor',
        3: 'Fair', 
        4: 'Good',
        5: 'Excellent'
    },
    verdictClasses: {
        0: 'text-muted',
        1: 'text-danger',
        2: 'text-warning',
        3: 'text-info', 
        4: 'text-primary',
        5: 'text-success'
    },
});

// Reset your input and strength meter to initial value when form is reset.
<input id="input-32" type="password" value="demo" class="strength">
<button class="btn btn-primary">Submit</button>
<button class="btn btn-default" type="reset">Reset</button>

// Plugin Methods. Dynamically set password via javascript and refresh strength meter. Click the Assign button.
<input id="input-33" type="password" class="strength">
<button class="btn btn-primary">Submit</button>
<button class="btn btn-default" type="reset">Reset</button>
<button class="btn btn-danger" type="button" 
    onclick="$('#input-33').val('K21$^akc');$('#input-33').strength('refresh');">
    Assign
</button>

// Plugin Methods. Return the current score and verdict via javascript. Click the Show button.
<input id="input-33" type="password" value="demo" class="strength">
<button class="btn btn-primary">Submit</button>
<button class="btn btn-default" type="reset">Reset</button>
<button class="btn btn-success" type="button" 
    onclick="alert('Strength: ' + $('#input-34').strength('score') + '%, Verdict: ' + $('#input-34').strength('verdict'))">
    Show
</button>