Javascript jQuery/AJAX验证后提交

我有一个表单是通过我的服务器上调用第三方API的POST请求提交的。此API可能有点慢（5-8秒）。我不希望用户提交两次和/或怀疑他们的表单提交发生了什么。所以我们的想法是显示一个旋转的轮子，直到下一个页面被加载（并且API请求被发送回我的服务器）

按下按钮时，下面的代码显示旋转的轮子，但不管表单输入是否正确。因此，如果所有字段都为空，则不提交表单，但会显示旋转滚轮

我有一个表单，它经过验证和检查，以确保使用以下代码正确输入字段

$(document).ready(function() {
  $('#ccForm').bootstrapValidator({
  // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
  },
    fields: {
       fname: {
        validators: {
          notEmpty: {
            message: 'Your name required and cannot be empty'
          }
        }
      },
      lname: {
        validators: {
          notEmpty: {
            message: 'Your name required and cannot be empty'
          }
        }
      },
      baddr1: {
        validators: {
          notEmpty: {
            message: 'Your name required and cannot be empty'
          }
        }
      },

      package: {
        validators: {
          notEmpty: {
            message: 'Must Pick Package'
          }
        }
      },
      bcity: {
        validators: {
          notEmpty: {
            message: 'Must Enter a City'
          }
        }
      },
      bcountry: {
        validators: {
          notEmpty: {
            message: 'Must select a Country'
          }
        }
      },
      bstate: {
        validators: {
          notEmpty: {
            message: 'Must Select a State'
          }
        }
      },
      ccnum: {
        validators: {
          creditCard: {
            message: 'The credit card number is not valid'
          },
          notEmpty: {
            message: 'Must Enter a Card Number'
          }
        }   
      },
      ccmo: {
        validators: {
          stringLength: {
            min: 2,
            max: 2,
            message: 'Two Digits'
          },
          digits: {
            message: 'The value is not an integer'
          },
          notEmpty: {
            message: 'Must Enter a Exp Month'
          }
        }   
      },
      ccyr: {
        validators: {
          stringLength: {
            min: 2,
            max: 2,
            message: 'Two Digits'
          },
          digits: {
            message: 'The value is not an integer'
          },
          notEmpty: {
            message: 'Must Enter a Exp Year'
          }
        }   
      },
      cvv2: {
        validators: {
          cvv: {
            creditCardField: 'ccnum',
            message: 'The CVV number is not valid'
          },
          notEmpty: {
            message: 'Must Enter a CVV'
          }
        }
      },
      bzip1: {
        validators: {
            zipCode: {
              country: 'bcountry',
              message: 'The value is not valid %s'
            },
            notEmpty: {
              message: 'Must Enter a Zip'
            }
          }
      }
    }
  })

以下是关于纺车的说明

(function (d) {
d.getElementById('ccForm').onsubmit = function () {
d.getElementById('pay').style.display = 'block';
d.getElementById('loading2').style.display = 'block';
};
}(document));

纺车的HTML代码：

<div id='loading2' style='display:none;'>
  <i class='fa fa-spinner fa-spin fa-3x'></i>
</div>

我需要的代码不会提交/显示纺车，直到表单正确验证

我也愿意接受更好的方法来完成这项任务。因为据我所知，我的代码实际上并没有“监听”任何请求的响应

提前谢谢。

当表单有效时触发的引导验证程序：

success.form.bv

因此，您可以尝试以下方法：

(function (d) {
    $('#ccForm').on('success.form.bv', function () {
        d.getElementById('pay').style.display = 'block';
        d.getElementById('loading2').style.display = 'block';
    });
});

---

另外，如果您已经包含了jQuery，那么您还可以在

getElementById

上使用jQuery选择器和函数，谢谢，这非常有效。我不熟悉您所指的jQuery选择器和方法。所以我要调查一下很好，很高兴它成功了！如果答案解决了你的问题，请接受。为您提供了一种从DOM中获取元素的简单方法，但是jQuery有许多用于操作和处理元素的函数。感谢其他人阅读，使用jQuery选择器，我最终将getElementByID行替换为$（'#pay'）.css（“display”，“block”）；