Проверка формы должна предотвращать загрузку анимации

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>