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 |
Type of indicator to display: a bar, an emoji or a color-changing lock icon. |
String('bar' | 'emoji' | '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 |
Errors
"input" is not a jQuery object
: input
is not a jQuery object.
"options" is not a plain object
: options
is not a plain JavaScript object.
"options.display" is not a valid display option. It should be `bar`, `emoji` or `icon`
: options.display
does not contain a valid value. It should be one of the following: bar
, emoji
or icon
.
"options.tooltipPosition" is not a valid tooltip position option. It should be one of `top`, `bottom`, `left` or `right`.
: options.tooltipPosition
does not contain a valid value. It should be one of the following: top
, bottom
, left
or right
.
"options.container" is not a jQuery object
: options.container
parameter was provided, but it is not a jQuery
object.
Description
This method allows you to add a password strength indicator for a specific input, in the form of a bar, an emoji or a color-changing lock icon.
Examples
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')
});