表单验证需要防止加载动画

Question

我有一个启用了表单验证的HTML表单，它工作正常。另外，我还希望在确保所有必需的框均已填充后再运行加载动画。我的问题是，当用户仍需要在表单中填充所需框时，动画正在运行。我有三个特殊形式的框，因此在运行此动画之前，我需要确保所有必需的框都已填写。谁能帮忙吗？

<script>
// This is form validation code
(function() {
  'use strict';
  window.addEventListener('load', function() {
    var form = document.getElementById('needs-validation');
    form.addEventListener('submit', function(event) {


      if (form.checkValidity() === false) {
        event.preventDefault();
        event.stopPropagation();
      }

      form.classList.add('was-validated');


    }, false);
  }, false);
})();
</script>


<script type="text/javascript">
 // This is loading animation code
  var myForm = document.getElementById('needs-validation');
myForm.addEventListener('submit', showLoader);
function showLoader(e) {
  this.querySelector('.loader-container').style.display = 'block';
  // the line below is just for the demo, it stops the form from submitting
  // so that you can see it works. Don't use it
  // e.preventDefault();
}
</script>