📌 Setup Steps
1. Enable Input IDs in Bubble — go to Settings → General → enable the "Expose the option to add an ID attribute to HTML elements" option.
2. Add an ID Attribute to your password Input (e.g.,
signup_password
).
3. Add the Smart Password Validator plugin element on the page — it is invisible at runtime, place it anywhere.
4. Set the
Input ID field to match the ID of your password input (no # symbol, no spaces).
5. Configure your security rules under
🔐 Validation Rules:
Minimum Length,
Require Number,
Require Uppercase Letter,
Require Lowercase Letter, and
Require Symbol.
6. (Optional) Under
👁 Visibility, enable
Enable Show/Hide Toggle and provide image URLs for
Show Password Icon and
Hide Password Icon. Configure
Icon Size,
Icon Transparency, and
Icon Left Margin.
7. (Optional) Under
📊 Strength Indicator, enable
Show Strength Indicator and customize the four labels:
Weak Label,
Fair Label,
Intermediate Label, and
Strong Label.
8. (Optional) Under
🎨 Text Styling, style the strength label:
Font Size,
Font Family,
Font Color,
Font Transparency, and
Icon-Text Spacing.
9. Use the exposed states in workflows:
-
valid_password (yes/no) — gate your sign-up button
-
empty_password (yes/no) — show/hide hints
-
strength (number 0–100) — drive a progress bar
-
num_character,
number,
upper_case,
lower_case,
symbol (yes/no) — display per-rule hints
Support[email protected] - for setup help, bug reports, and questions.
Built on Bubble
