How can I make this loader show only after form validation?-CodePudding

I need the spinner to start only after the form is validated. Both scripts work perfectly by themselves.

Validation:

(function() {
  'use strict'

  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  var forms = document.querySelectorAll('.needs-validation')

  // Loop over them and prevent submission
  Array.prototype.slice.call(forms)
    .forEach(function(form) {
      form.addEventListener('submit', function(event) {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }

        form.classList.add('was-validated')
      }, false)
    })

})()

Spinner:

function spinner() {
    document.getElementsByClassName("loader")[0].style.display = "block";
}

I've been trying to decipher these scripts in order to combine them, with no success.

CodePudding user response：

The statement if (!form.checkValidity()) calls a native function which checks whether the form is valid. (Not valid, actually, due to the negation operator !.)

Inside its brace block is what happens if the form is not valid.

After its brace block is what happens if the form is valid. Call spinner() there.

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