由于g-recaptcha，Shopify确认密码问题

Question

我已经在注册页面中创建了确认密码字段，但是由于G质询而面临问题，因为提交表单后，shopify重定向到质询页面，而js无法正常工作，我使用的是用于确认密码。

 <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

我相信您的JS代码根本无法正常工作。如果您总是被重定向到reCaptcha页面，则仅表示未触发jQuery代码。如果主题中未包含jQuery或脚本加载为deferred，并且您正在尝试执行代码，则可能会发生这种情况。

但是即使密码正常运行，如果密码匹配，您也会面临另一个问题-如果您使用的是Chrome（Firefox中为Maximum call stack size exceeded，则too much recursion错误）。原因是您始终在回调中阻止默认的提交行为，但是如果密码相同会导致无限循环，则还会触发submit。

请参阅下面的重新编写的代码，该代码应该起作用：

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

延迟jQuery加载
[通常，主题开发人员会在其中添加所有第三方库的文件（例如assets/vendor.js）。查找该文件，并确保jQuery存在。创建另一个文件，例如assets/custom.js，将您的代码放在此处。然后转到layout/theme.liquid，找到vendor.js文件所在的位置。它可能看起来像这样
<script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script>

包含带有自定义JS的文件
之后此行使其看起来像这样：
<script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'custom.js' | asset_url }}" defer="defer"></script>

不包括jQuery
Include it
我不想使用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.');
  }
});

如果以上方法没有帮助，请提供指向您网站的链接。