Solved

Increase min length of customer activate account and reset password

Julian87
Shopify Partner
2 0 0

Hello!

 

Is it possible to increase the min. length from 5 to 12 for customer account passwords (account/activate & account/reset)? I can't find any settings or a way to set it in the theme liquid files.

 

Kind regards,

 

Julian

Accepted Solutions (2)

okur90
Shopify Partner
126 20 18

This is an accepted solution.

@Julian87 Add the following JavaScript code to your theme.liquid file.

 

document.addEventListener('DOMContentLoaded', function() {
  var passwordInput = document.querySelector('input[type="password"]');

  if (passwordInput) {
    passwordInput.addEventListener('input', function() {
      var minLength = 12;

      if (passwordInput.value.length < minLength) {
        passwordInput.setCustomValidity('Password must be at least ' + minLength + ' characters long.');
      } else {
        passwordInput.setCustomValidity('');
      }
    });
  }
});

 

This code will enforce a minimum password length of 12 characters on any input field with the type "password" on your site.

 

Make sure that you have the following line of code in your theme.liquid file to include jQuery in your theme.

 

{{ '//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js' | script_tag }}
Code Slingin, Pixel Wranglin - Laugh it up at onlinex.com.au

View solution in original post

Brett_Helium
Shopify Partner
233 44 99

This is an accepted solution.

Hey there! You can do this by adding regular expression validation directly to the HTML input element.

 

You will need to find the password and password confirmation input elements which are usually located in the main-activate-account.liquid and main-reset-password.liquid files. Then add the HTML attributes pattern="regex" and title="Your error message". Here's an example of this:

<div class="password">
  <label for="password">Password</label>
  <input
    type="password"
    name="customer[password]"
    pattern="(?=.*\d)(?=.*\W)(?=.*[a-z])(?=.*[A-Z]).{12,20}$"
    title="Password must contain at least one number, one symbol, and one uppercase letter, and be at least 12 characters"
    > </div>

<div class="password_confirm">
  <label for="password_confirmation">Password Confirmation</label>
  <input
    type="password"
    name="customer[password_confirmation]"
    pattern="(?=.*\d)(?=.*\W)(?=.*[a-z])(?=.*[A-Z]).{12,20}$"
    title="Password must contain at least one number, one symbol, and one uppercase letter, and be at least 12 characters"
  >
</div>

Hopefully that helps you out! You can also read a little more details about this in the guide on our blog here: https://heliumdev.com/blog/shopify-strong-passwords-customer-account-activation-page

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 3 (3)

okur90
Shopify Partner
126 20 18

This is an accepted solution.

@Julian87 Add the following JavaScript code to your theme.liquid file.

 

document.addEventListener('DOMContentLoaded', function() {
  var passwordInput = document.querySelector('input[type="password"]');

  if (passwordInput) {
    passwordInput.addEventListener('input', function() {
      var minLength = 12;

      if (passwordInput.value.length < minLength) {
        passwordInput.setCustomValidity('Password must be at least ' + minLength + ' characters long.');
      } else {
        passwordInput.setCustomValidity('');
      }
    });
  }
});

 

This code will enforce a minimum password length of 12 characters on any input field with the type "password" on your site.

 

Make sure that you have the following line of code in your theme.liquid file to include jQuery in your theme.

 

{{ '//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js' | script_tag }}
Code Slingin, Pixel Wranglin - Laugh it up at onlinex.com.au

Brett_Helium
Shopify Partner
233 44 99

This is an accepted solution.

Hey there! You can do this by adding regular expression validation directly to the HTML input element.

 

You will need to find the password and password confirmation input elements which are usually located in the main-activate-account.liquid and main-reset-password.liquid files. Then add the HTML attributes pattern="regex" and title="Your error message". Here's an example of this:

<div class="password">
  <label for="password">Password</label>
  <input
    type="password"
    name="customer[password]"
    pattern="(?=.*\d)(?=.*\W)(?=.*[a-z])(?=.*[A-Z]).{12,20}$"
    title="Password must contain at least one number, one symbol, and one uppercase letter, and be at least 12 characters"
    > </div>

<div class="password_confirm">
  <label for="password_confirmation">Password Confirmation</label>
  <input
    type="password"
    name="customer[password_confirmation]"
    pattern="(?=.*\d)(?=.*\W)(?=.*[a-z])(?=.*[A-Z]).{12,20}$"
    title="Password must contain at least one number, one symbol, and one uppercase letter, and be at least 12 characters"
  >
</div>

Hopefully that helps you out! You can also read a little more details about this in the guide on our blog here: https://heliumdev.com/blog/shopify-strong-passwords-customer-account-activation-page

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

thank it's a very helpful solution and clear description thank you very much