Shopify表单验证提交函数仅触发一次问题求助

我帮你定位到了问题的核心，也整理了完整的修复方案，咱们一步步拆解：

问题根源 #

你代码里的致命问题出在#AddToCart的事件处理逻辑中：当验证不通过时，你执行了button.off()——这会直接解绑按钮上所有的click和submit事件！第一次点击时验证生效并阻止提交，但按钮已经失去了验证绑定，第二次点击自然会跳过验证直接提交表单。

另外还有几个影响稳定性的小问题：

• button.on()写法不规范，jQuery的on()必须指定事件类型，否则不会生效
• 同时监听按钮的click和submit事件不够健壮，表单可能通过回车键等其他方式提交，只监听按钮会有遗漏

修复方案 #

1. 移除错误的事件解绑逻辑 #

删掉验证不通过分支里的button.off()，我们需要保持事件绑定才能每次提交都触发验证。

2. 改为监听表单的submit事件（更可靠） #

把验证逻辑绑定到表单#AddToCartForm的submit事件上，这样无论用户点击按钮还是按回车，都会触发验证。

修复后的核心代码片段 #

// 替换原按钮的事件监听，改为监听表单提交
$('#AddToCartForm').on('submit', function(e) {
  const $form = $(this);
  const $button = $form.find('#AddToCart');
  const number = parseInt($facesSelector.val());
  let can_submit = true;

  // 先清除之前的错误提示
  $('.error').addClass('hide');
  $('#type-dogs-name').removeClass('required');
  $facesUploadFields.removeClass('required');

  // 验证图片上传项
  for(let i = 0, max = $facesUploadFields.length; i < max; i++) {
    const $field = $facesUploadFields.eq(i),
          $input = $field.find('input[type="file"]');
    if (i < number && !$input[0].files.length) {
      $field.addClass('required');
      can_submit = false;
    }
    // 用is(':visible')替代css判断，更可靠
    if($field.hasClass("empty") && $field.is(':visible')) {
      can_submit=false;
    }
    if (i >= number) {
      $input.val(null);
    }
  }

  // 验证文本输入框（加trim避免空格绕过验证）
  if(!$('#type-dogs-name').val().trim()){
    // 建议提前在HTML中写好错误提示元素，避免重复插入
    $('#type-dogs-name').prev('.error').removeClass('hide');
    $('#type-dogs-name').addClass('required');
    can_submit=false;
  }

  if(!can_submit) {
    e.preventDefault();
    e.stopPropagation();
    $button.addClass('disabled');
    // 这里绝对不能解绑事件！
  } else {
    $button.removeClass('disabled');
    $button.css({ opacity: 1 });
    // 验证通过后不需要手动submit，表单会默认提交
  }
});

// 优化文本框的错误清除逻辑，同时监听点击和聚焦事件
$("#type-dogs-name").on('click focus', function(){
  $('.error').addClass('hide');
  $(this).removeClass('required');
});

额外优化建议 #

• 提前在HTML中写好错误提示元素（比如<span class="error hide">This field is required</span>），避免每次验证不通过都插入新元素
• 用is(':visible')替代css('display') != 'none'，jQuery的内置方法兼容性更好
• 文本验证加上trim()，防止用户仅输入空格绕过验证

修改后，每次提交表单都会触发完整的验证逻辑，不会再出现第一次验证有效、第二次直接提交的问题了。

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