Shopify Checkout - 表单提交 - 页面未重新加载 - 无法使用 setAttribute('disable') 方法禁用按钮

Question

我最近找到了一种防止客户在 Shopify 上输入 PO BOX 的解决方案，我遇到了几个问题，想知道以前是否有人遇到过这种情况。我知道 Shopify 对 checkout.liquid 页面的操作有限制 -> 现在我发现这个很棒的功能会创建错误消息并阻止用户提交表单 - 现在当有人提交表单时，按钮不断加载 infinetely，我想做的是刷新页面。或者，我想禁用按钮 - 我通过创建一个新变量并使用 setAttribute 方法在控制台中测试此方法以禁用表单 ID。它在控制台中工作 - 但是当我将该脚本插入我的文件时 - 然后在控制台中检查 - 它会 return null.

(function($) {
  $(document).on('ready page:load page:change', function() {
    var regex = /^.*p(.O.|o box|ost office|ost box)/i;
    var fieldErrorClass = 'field--error';
    var fieldErrorMessageSelector = '.field__message--error';
    var errorText = '{{ 'shopify.checkout.shipping.Po_Box_Err' | t }}';
    var $inputs = $("[data-step] [name='checkout[shipping_address][address1]'], [data-step] [name='checkout[shipping_address][address2]']");

    var regexCheckFn = function(elem) {
      var $current = $(elem);
      var $parent = $current.closest('.field__input-wrapper');
      var $field = $current.closest('.field');
      if (regex.test($current.val())) {
        if (!$field.hasClass(fieldErrorClass)) {
          $field.addClass(fieldErrorClass);
        }
        if ($field.find(fieldErrorMessageSelector).length < 1) {
          $parent.after("<p class='field__message field__message--error'>"+ errorText +"</p>");
        }
        return false;
       } else {
        if ($field.hasClass(fieldErrorClass)) {
          $field.removeClass(fieldErrorClass);
        }
        if ($field.find(fieldErrorMessageSelector).length > 0) {
          $field.find(fieldErrorMessageSelector).remove();
        }
        return true;
      }
    };

    // Call regex check on form submit
    $(document).on('submit', '[data-step] form', function() {
      // default to true and will be set to false if there is an error to prevent form submission
      var isValid = true;
      $inputs.each(function() {
        isValid = isValid && regexCheckFn($(this));
      });
      return isValid;
    });

    // Call regex check on blur
    $inputs.blur(function() {
      regexCheckFn($(this));
    });

  });
})(Checkout.$);

Answer 1

问题是您的代码阻止在 Shopify 禁用提交按钮并将其切换为 "loading" 状态后提交表单，而您没有将其切换回来。

我会稍微更改代码以通过在输入模糊和表单提交事件上验证整个表单来处理此问题。如果表单有效，则启用提交按钮，否则禁用。请参见下面的示例：

(function($) {
  $(document).on('ready page:load page:change', function() {
    var regex = /^.*p(.O.|o box|ost office|ost box)/i;
    var fieldErrorClass = 'field--error';
    var fieldErrorMessageSelector = '.field__message--error';
    var errorText = '{{ 'shopify.checkout.shipping.Po_Box_Err' | t }}';
    var $inputs = $("[data-step] [name='checkout[shipping_address][address1]'], [data-step] [name='checkout[shipping_address][address2]']");

    var regexCheckFn = function(elem) {
      var $current = $(elem);
      var $parent = $current.closest('.field__input-wrapper');
      var $field = $current.closest('.field');
      if (regex.test($current.val())) {
        if (!$field.hasClass(fieldErrorClass)) {
          $field.addClass(fieldErrorClass);
        }
        if ($field.find(fieldErrorMessageSelector).length < 1) {
          $parent.after("<p class='field__message field__message--error'>"+ errorText +"</p>");
        }
        return false;
       } else {
        if ($field.hasClass(fieldErrorClass)) {
          $field.removeClass(fieldErrorClass);
        }
        if ($field.find(fieldErrorMessageSelector).length > 0) {
          $field.find(fieldErrorMessageSelector).remove();
        }
        return true;
      }
    };

    // Call regex check on form submit
    $(document).on('submit', '[data-step] form', validateForm);

    // Call regex check on blur
    $inputs.blur(validateForm);

    function validateForm() {
      var isValid = true;
      $inputs.each(function() {
        isValid = isValid && regexCheckFn($(this));
      });
      if (isValid) {
        $("#continue_button").removeAttr("disabled");
      } else {
        $("#continue_button").attr("disabled", "disabled").removeClass("btn--loading");
      }
      return isValid;
    }
  });
})(Checkout.$);

Shopify Checkout - 表单提交 - 页面未重新加载 - 无法使用 setAttribute('disable') 方法禁用按钮

Shopify Checkout - Form Submission - page not reloading - cannot disable button using setAttribute('disable') method

javascript

jquery

shopify