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

【问题标题】：Shopify Confirm password issue due to g-recaptcha由于 g-recaptcha，Shopify 确认密码问题
【发布时间】：2020-06-17 22:06:52
【问题描述】：

我在注册页面中创建了确认密码字段，但由于 G-challenge 面临问题，因为在提交表单后 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();
    }
  });
});

【问题讨论】：

所以问题在于您的 JS 代码不起作用，而不是 reCaptcha，不是吗？

标签： shopify shopify-app shopify-template shopify-javascript-buy-sdk shopify-activemerchant

【解决方案1】：

我相信你的 JS 代码根本不起作用。如果你总是被重定向到 reCaptcha 页面，这只是意味着你的 jQuery 代码没有被触发。如果jQuery 未包含在您的主题中或脚本加载为deferred 并且您尝试在加载代码之前执行代码，则可能会发生这种情况。

但是，即使您的代码可以正常工作，当密码匹配时，您也会面临另一个问题 - 如果您使用的是 Chrome，则会出现 Maximum call stack size exceeded 错误（在 Firefox 中为 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.');
  }
});

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

【讨论】：