How to verify a password input

I wanted to share what I put together for verifying a password. I spent some time looking through blog posts about proper user experience design for forms

And took that suggestion numbers 14,15,16 and 17 would help users greatly when signing up and creating a password according to the settings I’ve placed on my app.

This is what I came up with:

password verify

My intention on this tip is not to provide all steps, but rather the things I found to be a bit more advanced such as displaying that caps lock is on, verifying the use of lowercase, uppercase, special characters, numbers, character count and no spaces. Some other things such as showing the password and how to conditionally format things for colors etc. can be found on the forum, where I over time have learned how to do such things.

To make all of this work there are some plugins that you will need…I am on a low budget, so all are free plugins.

Big thanks to @levon and @mishav for making these available to the community for free and maintaining their functionality, as well as being responsive to questions and supporting users. Both responded to questions on how to use the plugins to help resolve issues I had with implementing them.

Also, thank you to @tim12333 who was very helpful and generous to get my code needed for the caps on to function correctly.

  1. To verify the character count I needed to use the “countable plugin”.

You must set your countable element to use the ID of the input to recognize what to count

So, whatever the ID Attribute of your input element is, you need to place in the countable element ID at the top of the element editor. I used “1” in my example…make it whatever you’d like it to be.

  1. To verify the use of lowercase, uppercase, special characters, numbers and no spaces I had to use “extract with regex”…This is a bit beyond me and I relied heavily on other websites for understanding how to use extract with regex, specifically what expressions to use for each validation.

This website is helpful

But also just google searching…something I do regularly to try and solve my own issues and to learn more about programming and app design etc.

For verifying the use of lowercase:

For verifying the use of uppercase:

For verifying the use of a number:

For verifying the use of special characters:

For verifying no spaces:

To be able to reveal the password I used the “reveal” plugin linked above…it is simple to use

Just place the element on page, then create a workflow event to trigger the “toggle” of the reveal…you must use the element ID Attribute of the input ( mine is “1” )

Screen Shot 2020-01-14 at 3.47.31 PM

Then the last portion of showing a caps lock on indicator requires the use of the toolbox plugin.

What you will need to do is add an expression element to the page as well as two JavaScript to Bubble elements

Screen Shot 2020-01-14 at 3.49.42 PM

In the expression element need to have the code:

Screen Shot 2020-01-14 at 3.50.02 PM

Also make sure to put a conditional on this element to ensure it works properly…basically make it so this element is not visible until the password input is visible

Screen Shot 2020-01-14 at 3.51.05 PM

Then in the JavaScript to Bubble elements you need the suffix set up

Screen Shot 2020-01-14 at 3.51.44 PM

yourTriggerNameForCapsPressed

Screen Shot 2020-01-14 at 3.52.18 PM

yourTriggerNameForNoCaps

After the page has the elements on page, need to add workflows

Screen Shot 2020-01-14 at 3.53.14 PM

For more information on this you can view the forum thread on the topic where I got the help I needed to get it to work.

For anything else in this set up that is needed, such as conditional formatting to show the check mark icons, color coding the helper text etc. please search on the forum.

One last thing is using the bubble provided password strength indicator…I still need to polish it up as you can see in the gif I get the yellow bar to appear without the first showing…either way.

You must use the input as set to content type password

Screen Shot 2020-01-14 at 3.56.42 PM

Then set up conditionals based on the password strength as generated by bubble

Check the forum post for more details

Hope this helps.

21 Likes

Excellent post @boston85719!

Thank you so much for putting it together and sharing!

1 Like

What a great post, thank you @boston85719!

Thank you…this is amazing and exactly what I needed

1 Like

Likewise - thanks for this post, helped me out a lot! Now just need to find how to have my input field changes trigger in realtime like yours shows in your demo video.

1 Like

It’s always amazing what gold nuggets you can find in the forum. Commenting to give this post the visibility it deserves. :slight_smile:

Thanks. It was in the end only those who took the arduous journey out to the Western US states during the gold rush, who then spent the time mining and scouring the land that found their gold nuggets.

1 Like