Shopify Dawn主题购物车自定义属性字段校验问题求助

背景 #

基于Shopify Dawn主题搭建电商网站，已在购物车页面添加与商品数量关联的自定义属性字段，实现代码如下：

{% for variable in (1..item.quantity) %}
  <div class="user_web_info">
    <div class="cart-attribute__field">
      <label for="website-name{{variable}}">Website Name*</label>
      {% capture attributename %}Website Name{{variable}}{% endcapture %}
      <input type="text" aria-required="true" required="required" class="required" data-name="Website Name{{variable}}" id="website-name{{variable}}" name="attributes[Website Name{{variable}}]" value="{{ cart.attributes[attributename] }}">
    </div>
    <div class="cart-attribute__field">
      <label for="website-url{{variable}}">Website URL*</label>
      {% capture attributeurl %}Website URL{{variable}}{% endcapture %}
      <input type="text" aria-required="true" required="required" class="required" data-name="Website URL{{variable}}" id="website-url{{variable}}" name="attributes[Website URL{{variable}}]" value="{{ cart.attributes[attributeurl] }}">
    </div>
  </div>
{% endfor %}

当前问题 #

点击购物车结账按钮时，未填写必填字段虽触发原生HTML校验提示，但页面仍直接跳转至结账页；尝试过jQuery/JS阻止表单提交方案无效，试用Customized Attribute应用也未解决，还需实现复选框校验功能。

解决方案 #

1. 核心原因 #

Dawn主题的结账按钮可能通过自定义JS逻辑提交表单，绕过了原生HTML校验的阻止机制，需要手动接管表单提交事件，完成全量校验后再决定是否允许提交。

2. 原生JS校验实现 #

将以下代码添加到assets/theme.js文件末尾，或sections/cart-template.liquid的底部（确保DOM加载完成后执行）：

document.addEventListener('DOMContentLoaded', function() {
  // 定位购物车表单，Dawn主题通常为action="/cart"的form
  const cartForm = document.querySelector('form[action="/cart"]');
  if (!cartForm) return;

  cartForm.addEventListener('submit', function(e) {
    let isValid = true;

    // 校验所有必填文本框
    const requiredInputs = cartForm.querySelectorAll('.required');
    requiredInputs.forEach(input => {
      if (!input.value.trim()) {
        isValid = false;
        input.reportValidity(); // 触发原生校验提示
      }
    });

    // 校验必填复选框（需给目标复选框添加checkbox-required类）
    const requiredCheckboxes = cartForm.querySelectorAll('.checkbox-required');
    requiredCheckboxes.forEach(checkbox => {
      if (!checkbox.checked) {
        isValid = false;
        // 自定义复选框提示逻辑
        const label = cartForm.querySelector(`label[for="${checkbox.id}"]`);
        if (label) {
          label.setAttribute('data-error', '请勾选此选项');
          label.style.color = '#ff0000';
        }
      } else {
        // 清除错误提示
        const label = cartForm.querySelector(`label[for="${checkbox.id}"]`);
        if (label) {
          label.removeAttribute('data-error');
          label.style.color = '';
        }
      }
    });

    // 校验不通过则阻止提交
    if (!isValid) {
      e.preventDefault();
      return;
    }

    // 校验通过，允许表单提交（若主题有自定义提交逻辑，可在此调用对应方法）
  });
});

3. 复选框配置示例 #

在需要校验的复选框代码中添加checkbox-required类：

<div class="cart-attribute__field">
  <label for="terms-agreement">我同意服务条款*</label>
  <input type="checkbox" class="checkbox-required" id="terms-agreement" name="attributes[Terms Agreement]">
</div>

4. 注意事项 #

• 避免使用jQuery，Dawn主题默认采用原生JS，减少冲突风险；
• 确认表单选择器正确，若主题购物车表单ID不是默认值，需调整querySelector参数；
• 若结账按钮是通过Ajax提交而非表单提交，需找到按钮的点击事件监听，在对应逻辑前插入校验代码。

内容的提问来源于stack exchange，提问作者Roby Raju Oommen