Password Requirements for Customer Registration

Solved

Password Requirements for Customer Registration

Microbry
Visitor
2 0 0

Im working on a project where I need to implement restrictions/requirements to the passwords that customers enter when they register. I have implemented the following:

- at least 1 capital letter
- at least 1 digit

- minimum 8 characters

I am doing this manually without using any apps/plugins. My issue is that my js scripts only work for the "reset password" page but it doesn't check the passwords entered when the user registers. Im targeting the password input fields from the main-register.liquid file and main-activate-account.liquid file using the input's ids. I put the Js code below in the theme.liquid file.

Does anyone know why the password field in the registration form isn't working like it's supposed to?


My scripts in theme.liquid:
1.JPG2.JPG

Accepted Solution (1)

Brett_Helium
Shopify Partner
238 45 102

This is an accepted solution.

Hey @Microbry!

I am not sure about doing this with JS, but I know this can be done by editing the HTML of the form directly to add a pattern attribute. Here's a guide from our company about how to do this on the activate account page, but it should be essentially the same process for the registration page as well: https://heliumdev.com/blog/shopify-strong-passwords-customer-account-activation-page

The one thing is that I know some themes add a 'novalidate' tag into the create account form. I know when using our HTML method this needs to be removed, and that could be the same problem being experienced with your JS method.

Brett_Helium_0-1700524337160.png


It sounds like you are on the right track here so you probably don't need it, but if anyone else is looking for a no-code solution for this problem, this can also be done using the Helium Customer Fields app where you can easily add validation rules directly to any field.

Brett | Helium
Helium builds apps that thousands of merchants depend on:
- Customer Fields ✪✪✪✪✪ (350+ reviews)
- Meteor Mega Menu ✪✪✪✪✪ (280+ reviews)

View solution in original post

Replies 2 (2)

Brett_Helium
Shopify Partner
238 45 102

This is an accepted solution.

Hey @Microbry!

I am not sure about doing this with JS, but I know this can be done by editing the HTML of the form directly to add a pattern attribute. Here's a guide from our company about how to do this on the activate account page, but it should be essentially the same process for the registration page as well: https://heliumdev.com/blog/shopify-strong-passwords-customer-account-activation-page

The one thing is that I know some themes add a 'novalidate' tag into the create account form. I know when using our HTML method this needs to be removed, and that could be the same problem being experienced with your JS method.

Brett_Helium_0-1700524337160.png


It sounds like you are on the right track here so you probably don't need it, but if anyone else is looking for a no-code solution for this problem, this can also be done using the Helium Customer Fields app where you can easily add validation rules directly to any field.

Brett | Helium
Helium builds apps that thousands of merchants depend on:
- Customer Fields ✪✪✪✪✪ (350+ reviews)
- Meteor Mega Menu ✪✪✪✪✪ (280+ reviews)
Microbry
Visitor
2 0 0

It appears that my issue was with "novalidate" in my main-register.liquid.

Thank you for pointing it out.