Usage and demonstration examples for Krajee strength-meter plugin. This JQuery plugin 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.
Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)
strength
// 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 toggle mask.
<input id="input-4" type="password" class="strength" data-toggle-mask="false">
// Use data attributes to control options. For example, hide strength meter.
<input id="input-5" type="password" class="strength" data-show-meter="false">
// Multi language plugins (e.g. French & Russian)
<head>
<!-- load strength meter locales JS in the head section -->
<script src="path/to/js/locales/strength-meter-fr.js" type="text/javascript"></script>
<script src="path/to/js/locales/strength-meter-ru.js" type="text/javascript"></script>
</head>
<input id="input-fr" type="password" class="strength" data-language="fr">
<input id="input-ru" type="password" class="strength" data-language="ru">
// 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-secondary" 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-secondary" 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-secondary" 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>
Comments & Discussion
Note
You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.
The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.