What’s the best way to enforce password strength on my sign up form?
→ minimum 8 characters
→ at least one (1) alphabetic character
→ at least one (1) numeric character
ideally when typing in the password / submitting sign up, for the text that usually pops up to show the problem, similar to when we leave something blank. I’m talking about this box that shows up:
UPDATE: I managed to use copilot AI to enforce and show my error message notification asking the user to fix the error. But would prefer for this yellow box thing pointed at the password field to show the error instead so users know where to change. Any advice?
I might use a variable called signupPasswordValidand set it to be a false Boolean on default.
I would bind the button disabled feature to that variable and include a ! at the beginning to turn a false to true. So when the variable is valse, the submit button is disabled. oR use a workflow to show a toast message when the password isn’t valid on button click.
When the input is changed, fire a workflow to validate your password using regex or some other method. If it passes, flip signupPasswordValid to true.
You might even include a hint for the user on screen when the password is invalid. Perhaps change the outline of the input to red until it’s valid.
Yes! That’s what I did. But would love to have the message show up on that box. Any idea how? haha (The Weweb default box when you try to submit a form and leave stuff empty)
i don’t know if you were able to solve this @raelyn but if somebody else wants to set up the password validation this way.
you need to go to the settings tab of your password input element and add in the attribute section a new entry with the key pattern and then the value needs to be the regex of your specific validation.
No, it’s default of the browser. You can disable required and do your own logic, to avoid this. You’d also have to create a whole remainder thingy too.
