Confirm password field when creating an account

[Wiltshire_Scent]

Hi, 

I would like to add in a confirm password field (I am surprised this isn't a standard feature) into the create account section. 

I am using the Dawn theme.

Thanks, 

Alex

[Olivia]

Hey, @Wiltshire_Scent!

Welcome to Shopify Community.

I was happy to do some research for you, and I found this third-party article on implementing a confirm password field in the customer registration page. Before attempting code changes, it's always a good idea to back up your theme and making sure you are comfortable with code changes. 

If so, this article is a great reference point! I trust that helps, but let us know if you have further questions.

Warm regards,

[DabsDesign]

Hello @Wiltshire_Scent  to enter this information is very simple. You can copy the style of the fields that Shopify itself suggests: https://shopify.dev/themes/customer-engagement/additional-customer-information

It can also be done the way this tutorial indicates. See below:

1. From your Shopify admin, to Online Store > Theme.
2. Find the theme you want to edit and then click Action > Edit code.
3. In the Templates section, click customers/register.liquid to open the file in the online code editor.
4. In the online code editor of register page, you add a new field

<input type="password" value="" name="customer[password_confirmation]" id="confirm-password" class="password text" size="30" />​

• Add the javascript code to the end of the file

<script>
  $(function(){
    $('#create_customer').submit(function(e) {     
      if ( $('input[name="customer[password]"]').val() != $('input[name="customer[password_confirmation]"]').val()) {
        e.preventDefault();
        alert('Passwords do not match.');
      }
    });
  });
</script>​

6. Click Save and you are done.

Don't forget to insert the Jquery CDN script on this page (in case there is an error in your console).

• https://www.w3schools.com/jquery/jquery_get_started.asp

It can be inserted right at the top of the page. And that's it. You can customize the alert message however you like. If anyone still has questions, reply here and I'll try to help.

----------------------------------

PT-BR: Português Brasileiro

Olá @Wiltshire_Scent para inserir essa informação é bem simples. Você pode copiar o estilo dos campos que a própria Shopify sugere: https://shopify.dev/themes/customer-engagement/additional-customer-information

Também pode ser feito da maneira que este tutorial indica. Segue abaixo:

1. From your Shopify admin, to to Online Store > Theme.
2. Find the theme you want to edit and then click Action > Edit code.
3. In the Templates section, click customers/register.liquid to open the file in the online code editor.
4. In the online code editor of register page, you add a new field

<input type="password" value="" name="customer[password_confirmation]" id="confirm-password" class="password text" size="30" />

      5. Add the javascript code to the end of the file 

<script>
  $(function(){
    $('#create_customer').submit(function(e) {     
      if ( $('input[name="customer[password]"]').val() != $('input[name="customer[password_confirmation]"]').val()) {
        e.preventDefault();
        alert('Passwords do not match.');
      }
    });
  });
</script>

     6. Click Save and you are done.

Não se esqueça de inserir nessa página (caso ocorra um erro em seu console) o script do Jquery CDN. 

• https://www.w3schools.com/jquery/jquery_get_started.asp

Pode ser inserido bem no começo da página. E é isto. Você poderá personalizar a mensagem de alerta da forma que desejar. Se alguém ainda tiver dúvidas, responde aqui que tentarei ajudar.

[Olivia]

Thank you so much for your incredibly detailed response, @DabsDesign.

Thank you for taking the time to share this solution with our readers, I trust this will be very helpful.

Please make sure to accept the appropriate response as an accepted solution if it works for you, @Wiltshire_Scent!

Warm regards,

[BB_Tech]

This worked with the popup but didnt prevent the actual account creation

[Olivia]

Thank you for leaving your feedback on this thread, @BB_Tech.

To clarify, you implemented the code changes above and have a 'confirm password' field? However, an account is created, even if the password isn't confirmed? I'm not sure if I understand entirely, so please do share any context.

Warm regards,

[BB_Tech]

Yes, I will still get a pop up that reads " passwords dont match", but it will not prevent account creation

[Olivia]

Thank you so much for the context, @BB_Tech.

Based on my research, this code should definitely prevent that using the additional jQuery, however, I will let our code experts chime in to provide further guidance and advice around resolving this for you. I welcome both, @DabsDesign, and other community members to share their feedback here.

Warm regards,

[DabsDesign]

@BB_Tech try this code:

<script>
  $(function(){
    $('#create_customer').submit(function(e) {     
      if ($('input[name="customer[password]"]').val() != $('input[name="customer[password_confirmation]"]').val()) {
        alert('Passwords do not match.');
        return false;
      }
    });
  });
</script>

With this change, the script will check if the passwords match before allowing the form to be submitted. If the passwords do not match, the user will see an alert message and the form will not be submitted. If the passwords match, the user can proceed and the action on the "create_customer" button will be executed normally.

@Olivia thanks for reaching us!

[BB_Tech]

Okay the dialog box pops up now but again after I click okay on the dialog pop up box the screen refreshes to the next screen

[DabsDesign]

The better way for you, is to contract a Shopify Expert to do this job. Fell free to ask for us a quote: [email protected]

[AlexPlaza]

Hello @BB_Tech ,

First of all I am no coder, I'm just learning by doing. 

I was having the same problem as you, but finally after a tons of research i figured it out!

Having installed jQuery, now you have to install the jQuery Validation Pluguin (i didn't know that you can install jQuery Plugins btw). Here you have the web with all the info: https://jqueryvalidation.org/

Here is how i did it:

In my case, i'm using a 3rd party theme, and I went where all the plugins are installed that is in assets/dt-plugins.js

Then added the code that is in this page https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js

Next I went to templates/customers/register.liquid (go where you want to do the password validation).

In my case the <input> for my Password field is:

<input type="password" name="customer[password]" id="CreatePassword" autocomplete="new-password" placeholder="{{ 'customer.register.password' | t }}"

Here you want to be sure that you have an id="" and a name="" that normally is name="password"

And my Password Confirmation <input> is the one that @DabsDesign provieded us 🙂 (with a few added attributes)

<input type="password" value="" name="customer[password_confirmation]" id="confirm-password" class="password text" autocomplete="new-password" required>

Here remember the name=""

Now in the final of the page insert this code:

<script>
        $(document).ready(function(){
            $('form').validate({     
                rules: {
                    'customer[password]': {
                        required: true
                    },
                    'customer[password_confirmation]': {
                        required: true,
                        equalTo: '#customer_password' 
                    }
                }
            });
        });
</script>

The first '' after rules: is your password name="", the second '' is your password confirmation name="". And in the equalTo you have to put your password id="".

I hope you can solve it 😄

[zhicheng1]

I implemented this code but the page just automatically submits on an endless loop.

[michael-helium]

As you can see on this thread, the challenge is not adding the password confirmation field but rather how to prevent account creation.

For the simplest no-code solution, check out the Customer Fields app. You can use the app's Lite plan to create a password confirmation field on your registration form. Other features on the Lite plan include:

• Require email verification
• Allow customers to edit their own name, email, etc.
• Email notifications for staff for new or edited customers