Shopify自定义表单（JS+Liquid）校验、成功提示及文件上传问题咨询

1. 必填字段校验功能实现 #

你可以结合HTML原生属性和JS监听实现两层校验：

1. 先在Liquid写表单字段时，给所有需要必填的字段加上required原生属性，浏览器会默认做基础校验拦截
2. 额外加JS提交拦截逻辑做自定义校验，示例代码如下：

const membershipForm = document.querySelector('#自定义表单的ID');
membershipForm.addEventListener('submit', (e) => {
  const requiredFields = membershipForm.querySelectorAll('[required]');
  let formValid = true;
  requiredFields.forEach(field => {
    // 只校验当前可见的必填字段
    if(field.offsetParent !== null && !field.value.trim()) {
      formValid = false;
      // 可自行扩展错误提示逻辑，比如给字段加红色边框、显示对应提示文案
      field.classList.add('error-border');
    } else {
      field.classList.remove('error-border');
    }
  })
  if(!formValid) e.preventDefault();
})

注意事项：

• 如果有根据会员等级动态显示/隐藏的字段，校验时需要过滤掉隐藏字段，避免出现无法提交的问题
• 前端校验是第一道防线，建议同时在Klaviyo后台配置对应字段的必填规则，避免前端校验被绕过导致脏数据入库

2. 提交成功后提示信息展示 #

建议用异步提交表单的方式实现，不需要跳转页面即可展示提示：

1. 先在Liquid代码里提前写好成功提示的DOM结构，默认设置为隐藏：

<div id="submit-success-tip" style="display: none; color: green; margin: 10px 0;">
  注册申请提交成功，后续通知将发送至您填写的邮箱
</div>

2. 修改表单提交逻辑为异步提交，提交成功后操作DOM显示提示、隐藏表单即可，示例代码如下：

membershipForm.addEventListener('submit', async (e) => {
  e.preventDefault();
  // 先执行上面的必填校验逻辑，校验不通过直接终止后续操作
  const formData = new FormData(membershipForm);
  try {
    const submitRes = await fetch('你的Klaviyo表单提交接口地址', {
      method: 'POST',
      body: formData
    })
    if(submitRes.ok) {
      membershipForm.style.display = 'none';
      document.querySelector('#submit-success-tip').style.display = 'block';
    }
  } catch(err) {
    // 可自行添加提交失败的提示逻辑
  }
})

注意事项：

• 不要使用表单默认的同步提交方式，同步提交会刷新页面，无法在当前页展示成功提示
• 可自行扩展提交中的加载状态，避免用户重复点击提交按钮

3. 身份证明文件的上传逻辑说明 #

无法直接将用户上传的文件通过Klaviyo直接随邮件发送，必须先上传至存储服务，原因如下：

• Klaviyo的公开表单提交接口默认不支持接收二进制文件类数据，就算前端把文件塞进表单提交，Klaviyo也不会存储对应文件，自然无法将其作为邮件附件发送
• 你可以先将用户上传的文件上传到Shopify自带的文件存储服务，上传成功后拿到文件的永久访问URL，再把该URL作为普通文本字段同步到Klaviyo，后续发邮件时可以直接把URL放在邮件内容里供相关人员查看
• 如果确实需要把文件作为邮件附件发送，你需要自行实现后端逻辑，拿到文件后调用邮件发送接口时主动把文件添加为附件，无法通过Klaviyo的默认流程实现
  注意事项：
• 身份证明属于用户敏感隐私信息，上传后请设置合适的访问权限，避免文件泄露

内容的提问来源于stack exchange，提问作者melwyn mendonca