Javascript表单验证提交函数仅被调用一次

我这里有JQuery代码：

$(function() {

  const $facesSelectorContainer = $('.faces-select');
  if ($facesSelectorContainer) {

    // store some variables
    const $hiddenFacesSelector = $('.selection-wrapper-faces'),
      $facesButtons = $facesSelectorContainer.find('.faces-container'),
      $facesSelector = $hiddenFacesSelector.find('select'),
      $facesUpload = $('.faces-upload'),
      $facesUploadFields = $facesUpload.find('.face-upload-container');

    // upload the number of faces upload inputs visible
    function updateFacesNumber(e) {
      const number = parseInt($facesSelector.val());

      for(let i = 0, max = $facesUploadFields.length; i < max; i++) {
        const $field = $facesUploadFields.eq(i), $input = $field.find('input[type="file"]');
        $field.toggle(i < number).removeClass('required');
        if (i >= number) {
          $input.prop('required', false);
        } else {
          $input.prop('required', true);
        }
        $input.trigger('change');
      }
      $facesButtons.removeClass('selected');
      $facesButtons.filter(`[data-faces-number="${number}"]`).addClass('selected');
    }

    $('.faces-container').on('click', (e) => {
        const j = $(e.target).closest('.faces-container').index()-1;
        console.log(j);
        $('.faces-container').removeClass('selected');
        $(e.target).closest('.faces-container').addClass('selected');

        $facesUploadFields.removeClass('show');
        for ( let g=1;g<=j;g++)
            $facesUploadFields.eq(g).addClass('show');

    });
    updateFacesNumber();
    setTimeout(updateFacesNumber, 10); // re-update after 10ms, so that images in cache will be loaded
    $facesSelector.on('change', updateFacesNumber);

    // update the faces number on click
    $facesSelectorContainer.on('click', '.faces-container', function(e) {
      e.preventDefault(); e.stopPropagation();
      const value = $(this).data('faces-number');
      $facesSelector.val( value ).trigger('change');
    });


    // handle uploads
    $facesUploadFields.on('change', 'input[type="file"]', function() {
      const file = this.files, $this = $(this), $field = $this.closest('.face-upload-container'), $image = $field.find('.preview-image'), $remove = $field.find('.remove'), $required = $field.find('.required');
      if (file.length) {
        $field.removeClass('empty required');
        const blob = window.URL.createObjectURL(file[0]);
        $image.css({ 'background-image': 'url(' + blob + ')' }).addClass('visible');
        $image.addClass('show');
        $remove.addClass('show');
        $required.addClass('hide');
      } else {
       // $('#AddToCart').attr('disabled','disabled');
        //$('#AddToCart').css({ opacity: 0.5 });
        $field.addClass('empty');
        $image.css({ 'background-image': '' }).removeClass('visible');
        $image.removeClass('show');
        $remove.removeClass('show');
        $required.removeClass('hide');
      }
      /*if($('.empty.show').length===0 && $('#type-dogs-name').val().length ){
        console.log('radi');
        $('#AddToCart').removeAttr('disabled'); 
        $('#AddToCart').css({ opacity: 1 });
      }*/


    }).on('click', '.remove', function(e) {
      e.preventDefault(); e.stopPropagation();
      const $this = $(this), $field = $this.closest('.face-upload-container'), $input = $field.find('input[type="file"]');
      $input.val(null).trigger('change');
    });
/*
    // display "required" message on form submit
    $('#AddToCart').unbind();
    $('#AddToCart').off();
    $('#AddToCart').prop("onclick", null).off();

    $form = $('form[action="/cart/add"]');
    $form.off();
    $form.find(":submit").prop("onclick", null).off();
*/


    $('#AddToCart').on('click submit', function(e) {
     const number = parseInt($facesSelector.val());
      const button = $(this);
      let can_submit = true;
      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;
        }
        if($facesUploadFields.eq(i).hasClass("empty") && $facesUploadFields.eq(i).css('display') != 'none') 
          can_submit=false;

        if (i >= number) {
          $input.val(null);
        }
      }

      if(!$('#type-dogs-name').val()){
        $('#type-dogs-name').before('<span class="error">This field is required</span>');
        $('.error').removeClass('hide');
        $('#type-dogs-name').addClass('required');
        can_submit=false;
      }

      if(can_submit===false) {
        button.off();
        e.preventDefault();
        e.stopPropagation();        
        button.addClass('disabled');
        //button.css({ opacity: 0.5 });
        //button.attr('disabled','disabled');
        $('#AddToCartForm').off(); 
      }
      else {
        button.on();
        e.preventDefault();
        e.stopPropagation();
        button.removeClass('disabled');
        button.css({ opacity: 0.5 });
        button.removeAttr('disabled');
        $('#AddToCartForm').on();
        $('#AddToCartForm').submit(); 
      }

    });
    $("#type-dogs-name").click(function(){
      if($('.empty.show').length===0 && $('#type-dogs-name').val().length){
        console.log('radi');
        $('#AddToCart').removeAttr('disabled'); 
        $('#AddToCart').css({ opacity: 1 });
      }
      $('.error').addClass('hide');
      $("#type-dogs-name").removeClass('required');
    });
    /*$("#type-dogs-name").change(function(){
      if($('.empty.show').length===0 && $('#type-dogs-name').val().length){
        console.log('radi');
        $('#AddToCart').removeAttr('disabled'); 
        $('#AddToCart').css({ opacity: 1 });
      }
    });*/
  }
});

$（函数（）{
常量$facesSelectorContainer=$（'.faces select'）；
if（$facesSelectorContainer）{
//存储一些变量
常量$hiddenFacesSelector=$（'.selection-wrapper-faces'），
$facesButtons=$facesSelectorContainer.find（“.faces容器”），
$facesSelector=$hiddenFacesSelector.find（'select'），
$facesUpload=$（'.faces upload'），
$facesUploadFields=$facesUpload.find（'.face upload container'）；
//上载可见的面上载输入数
函数updateFacesNumber（e）{
const number=parseInt（$facesSelector.val（））；
for（设i=0，max=$facesUploadFields.length；i=编号）{
$input.prop（'required'，false）；
}否则{
$input.prop（'required'，true）；
}
$input.trigger（'change'）；
}
$facesButtons.removeClass（'selected'）；
$facesButtons.filter（`[data faces number=“${number}”]`）.addClass（'selected'）；
}
$（'faces container'）。在（'click'，（e）=>{
const j=$（e.target）.closest（'.faces container'）.index（）-1；
控制台日志（j）；
$（'.faces container'）.removeClass（'selected'）；
$（e.target）.最近（'.faces container'）.addClass（'selected'）；
$facesUploadFields.removeClass（'show'）；
for（设g=1；g=number）{
$input.val（空）；
}
}
if（！$（'#键入狗名'）.val（）{
$（“#键入狗名”）。在（'此字段为必填项'）之前；
$（'.error'）.removeClass（'hide'）；
$（“#键入狗名”）.addClass（'required'）；
can_submit=false；
}
if（can_submit===false）{
按钮关闭（）；
e、 预防默认值（）；
e、 停止传播（）；
addClass（'disabled'）；
//css（{opacity:0.5}）；
//attr（'disabled'，'disabled'）；
$（'#AddToCartForm'）.off（）；
}
否则{
按钮上（）；
e、 预防默认值（）；
e、 停止传播（）；
按钮。removeClass（“禁用”）；
css（{opacity:0.5}）；
按钮。removeAttr（“禁用”）；
$（'#AddToCartForm'）。on（）；
$（#AddToCartForm'）。提交（）；
}
});
$（“#键入狗名”）。单击（函数（）{
if（$（'.empty.show'）.length==0&$（'#键入狗名'）.val（）.length）{
console.log（'radi'）；
$（“#AddToCart”）.removeAttr（'disabled'）；
$（'#AddToCart'）.css（{opacity:1}）；
}
$（'.error'）.addClass（'hide'）；
$（“#键入狗名”）.removeClass（'required'）；
});
/*$（“#键入狗名”）.change（函数（）{
if（$（'.empty.show'）.length==0&$（'#键入狗名'）.val（）.length）{
console.log（'radi'）；
$（“#AddToCart”）.removeAttr（'disabled'）；
$（'#AddToCart'）.css（{opacity:1}）；
}
});*/
}
});

我在这方面已经做了很长时间了，所以你会看到一些评论，我试图实现最好的解决方案

网址如下： 它在Shopify上运行。所以我尝试对表单进行一些验证。如果您尝试提交表单（添加到购物车按钮），但尚未在文本字段中插入所有图片和名称，您将无法提交，但会显示一个错误。这就是它的工作原理。但是，当我再次尝试提交表单时，仍然没有添加所有需要的内容（输入字段中的图片和文本），它将提交，并且不会显示错误

---

所以我的猜测是：它以某种方式通过了验证函数，我不知道为什么会发生这种情况。如果有人能帮助我，我将非常感激。谢谢

代码的另一部分可能会从提交中删除事件，从而禁用验证。在shopify上尤其如此，在shopify中，来自多个供应商的多个应用程序安装在同一主题上，并显示在同一页面上。你应该在shopify之外测试你的代码（从我的快速观察来看，你提到的问题看起来还行，虽然有很多事情需要改进，但是你说正在进行中，所以不提它们）。另一个提示。。。这些stopPropagations将破坏使用该按钮的任何其他应用程序。你应该重新考虑一下。谢谢你的建议。我认为添加到购物车可能被其他应用程序使用。我将尝试禁用它，看看会发生什么。但如果这是真的，那么为什么它第一次有效，第二次被跳过？这只是一种感觉，不是100%确定。但是它可能有两种工作方式。如果在您的应用程序事件之后处理了其他一些应用程序事件（即使您的StopRopagation也可能发生这种情况，有两种方式，稍后触发和延迟执行），并且由于某种原因，它会解除所有事件的绑定，不会触发第二次执行。如果在没有停止传播的情况下之前调用，它可能会解除绑定，并且您的验证第一次仍然有效（这是一场资源竞赛，所以在这种情况下不确定）。无论如何，最好的调查方法是在函数中添加一个控制台日志，看看它是否出现。如果没有，那么事件就是问题所在。