0

我在注册页面中创建了确认密码字段，但由于 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();
    }
  });
});
4

1 回答 1

0

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

但即使你的代码正常工作，当密码匹配时，你也会面临另一个问题——Maximum call stack size exceeded如果你使用 Chrome 会出错（ Firefox 中的递归过多）。原因是您总是在回调中阻止默认提交行为，但也会触发submitif 密码相同，这会导致无限循环。

请参阅下面应该可以工作的重新编写的代码：

$(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

包括它

我不想使用 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.');
  }
});

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

于 2020-03-05T19:47:52.397 回答