Shopify结账页自定义校验脚本：点击提交后页面重载且无法跳转下一页面

你遇到的点击提交就整页刷新、校验通过也无法跳转的问题，本质是自定义脚本逻辑和Shopify原生结账流程的事件机制冲突，结合代码一共有4个明确的错误点：

• 错误修改Shopify原生字段标识：你把地址输入框的name属性从Shopify默认的checkout_shipping_address_address1改成了addressOne。Shopify的后端是完全靠表单字段的原始name属性来识别、收集用户输入的，改完之后后端根本找不到你填的地址值，会判定必填参数缺失，直接触发整页同步刷新打回页面。
• 破坏Shopify原生异步提交流程：你给提交按钮绑定了click事件拦截，阻止默认行为后手动触发form的submit。但Shopify结账页本身是用AJAX异步提交表单的，手动触发的原生submit会绕过这套异步逻辑，直接走浏览器的默认同步提交，表现就是点击后整页刷新，没法平滑跳转到下一步。
• 手机号校验逻辑完全失效：你写的phoneNumberValidation()函数内部没有任何实际的校验判断，只是把phoneFormatValidated变量硬赋值为true，不管手机号输入是否合规、是否为空，校验标记永远通过，完全起不到规则约束的作用。
• 校验插件初始化时机错误：你把jQuery validate的初始化放在了$(document).ready回调里，但Shopify结账页是动态分段加载的，这个回调触发时收货地址表单往往还没有渲染完成，导致校验规则根本没有绑定到真实的表单元素上。

可直接替换的修复代码 #

把原来的两段脚本替换为以下逻辑，即可实现要求的两项校验规则，同时不破坏Shopify原生提交流程：

// 适配Shopify动态加载机制，替代传统的document.ready
$(document).on('page:load page:change', function() {
  // 仅在收货地址填写步骤生效
  if (Shopify.Checkout.step === 'shipping_address') {
    // 地址字段绑定校验规则：保留原生name属性，不做修改
    const $addressField = $('#checkout_shipping_address_address1');
    $addressField.attr({
      minlength: 16,
      maxlength: 200,
      required: 'required'
    });

    // 手机号字段绑定校验规则
    const $phoneField = $('[name="checkout[shipping_address][phone]"]:not([tabindex="-1"])');
    $phoneField.attr({
      maxlength: 10,
      minlength: 10,
      required: 'required'
    });
    // 移除Shopify自带的手机号格式化逻辑，避免规则冲突
    $phoneField.removeAttr('data-phone-formatter data-phone-formatter-country-select');

    // 限制手机号只能输入纯数字
    $phoneField.keypress(function(event) {
      const charCode = event.which;
      // 拦截非数字的按键输入
      if (charCode < 48 || charCode > 57) {
        event.preventDefault();
      }
    });

    // 初始化jQuery validate校验插件
    $('form.edit_checkout').validate({
      rules: {
        // 地址规则：最少16字符
        'checkout[shipping_address][address1]': {
          required: true,
          minlength: 16
        },
        // 手机号规则：必须10位纯数字
        'checkout[shipping_address][phone]': {
          required: true,
          minlength: 10,
          maxlength: 10,
          digits: true
        }
      },
      // 自定义错误提示文案
      messages: {
        'checkout[shipping_address][address1]': "Enter an address of minimum 16 characters",
        'checkout[shipping_address][phone]': "Please enter 10 digit phone number"
      },
      // 校验通过后的处理逻辑
      submitHandler: function(form) {
        // 触发浏览器原生提交方法，自动调用Shopify绑定的AJAX异步逻辑，不会整页刷新
        form.requestSubmit();
      }
    });
  }
});

关键注意事项 #

• 绝对不要随意修改Shopify结账页表单元素的原生name属性，所有自定义逻辑只能新增校验规则、事件监听，不能改动原生字段的标识
• 不要直接拦截提交按钮的点击事件做手动提交，所有提交前的校验要交给validate插件处理，校验通过后通过submitHandler钩子触发原生提交，不要手动调用form.submit()
• 所有初始化逻辑必须放在Shopify提供的page:load/page:change事件回调里，不要依赖通用的DOM ready事件，适配动态加载的页面场景
• 手机号的纯数字校验直接用validate插件自带的digits规则即可，不需要零散写自定义判断逻辑

内容的提问来源于stack exchange，提问作者Lakshay Kalra