Shopify Confirm password issue due to g-recaptcha

Question

I have created Confirm password field in registration page but facing issue due to G-challenge as shopify redirect to challenge page after submiting the form and js dont work that i was using for confirm password.

 <input type="password" name="customer[password]" id="CreatePassword" class="{% if form.errors contains 'password' %} error{% endif %}" required>
 <input type="password" value="" name="customer[password_confirmation]" id="confirm-password" class="password text {% if form.errors contains 'password' %} error{% endif %}" size="30" required/>



$(function(){
  $('form#create_customer').submit(function(e) {
    e.preventDefault();
    if ( $('#CreatePassword').val() != $('#confirm-password').val()) {
      alert('Passwords do not match.');
    } else {
        $('form#create_customer').submit();
    }
  });
});

Answer 1

I believe that your JS code is not working at all. If you're always getting redirected to the reCaptcha page, it just means that your jQuery code is not triggered. It may happen if jQuery is either not included in your theme or script loading is deferred and you're trying to execute your code before it's loaded.

But even when get your code working, you will face another issue when passwords do match - Maximum call stack size exceeded error if you're using Chrome (too much recursion in Firefox). The reason is that you're always preventing the default submit behaviour in your callback but also triggering the submit if passwords are the same which leads to an infinite loop.

See the reworked code below that should work:

$(function(){
  $('form#create_customer').submit(function(e) {
    if ( $('#CreatePassword').val() != $('#confirm-password').val()) {
      e.preventDefault();
      alert('Passwords do not match.');
    }
  });
});

---

jQuery loading is deferred

Generally, theme developers have a file (e.g. assets/vendor.js) where they add all third-party library. Find that file and make sure that jQuery is there. Create another file e.g. assets/custom.js, put your code there. Then go the layout/theme.liquid and find where the vendor.js file is included. It might look something like that

<script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script>

Include your file with custom JS after this line to make it look something like that:

<script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'custom.js' | asset_url }}" defer="defer"></script>

jQuery is not included

Include it

I don't want to use jQuery!

var createCustomerForm = document.getElementById("create_customer");
var passwordInput = document.getElementById("CreatePassword");
var passwordConfirmInput = document.getElementById("confirm-password");
createCustomerForm.addEventListener("submit", function(e) {
  if (passwordInput.value != passwordConfirmInput.value) {
    e.preventDefault();
    alert('Passwords do not match.');
  }
});

---

If the above was not helpful, please provide a link to your website.