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

Question

我最近找到了一种解决方案，可以阻止客户在 Shopify 上进入 PO BOX，我遇到了几个问题，想知道是否有人以前遇到过这种情况。我知道 Shopify 对您可以使用 checkout.liquid 页面执行的操作有限制 -> 现在我发现这个很棒的功能会创建错误消息并阻止用户提交表单 - 现在当有人提交表单时，按钮不断加载，我想做的是刷新页面。或者，我想禁用该按钮 - 我在控制台中通过创建一个新变量并使用 setAttribute 方法在表单 ID 上禁用该方法来测试此方法。它在控制台中工作 - 但是当我将该脚本插入我的文件时 - 然后在控制台中检查 - 它会返回 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 禁用提交按钮并将其切换为“正在加载”状态并且您没有将其切换回之后，您的代码会阻止提交表单。

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

(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.$);