Skip to content

monster.ui.showPasswordStrength()#

Syntax#

monster.ui.showPasswordStrength(input[, options]);

Parameters#

Key Description Type Default Required
input Input on which the method will be applied. Best suited for an input of the password type. jQuery true
options Object(#/options) false

options#

Key Description Type Default Required
container Where to append the password strength display (by default, it will be appended after the input). jQuery false
display Can be set to 'icon' in order to display the password strength as a color-changing lock icon (with tooltips) instead of a bar. String('bar' | 'icon') bar false
tooltipPosition When the display is set to 'icon', you can choose the position of the tooltip on the icon. String('top' | 'bottom' | 'right' | 'left') top false

Description#

This method allows you to add a password strength indicator for a specific input, in the form of either a bar or an icon.

Examples#

Using the default options to show a bar below the input#

monster.ui.showPasswordStrength(template.find(':password'));

Using custom options to show an icon in a specific container#

monster.ui.showPasswordStrength(template.find(':password'), {
    display: 'icon',
    container: template.find('.your-password-strength-container')
});