So I'm taking this more relaxed time to play around a bit with some coding... basically learnt that javascript sucks (it makes no sense, you can't tell whats a object/variable/function/etc, its just confusing. PHP is waaay easier haha), but is crucial to pretty much any web app.

I have a form built using bootstrap styling, and I want to use the client-side validation styling bootstrap has built in. This was simple when submitting directly to PHP using their example here.

But in this instance, I don't want to reload the page, I want to submit the form via AJAX, and then load in some new HTML from that AJAX response.

So far, I have this....

$("#runAssesment").submit(function(event){
 event.preventDefault();
    // cancels the form submission
 var forms = document.getElementsByClassName('needs-validation');
 var validation = Array.prototype.filter.call(forms, function(form) {
  form.addEventListener('submit', function(event) {
   if (form.checkValidity() === false) {
    event.preventDefault();
    event.stopPropagation();
   }else {
      submitForm();
   }
   form.classList.add('was-validated');
  }, false);
 });
});

submitForm() is my AJAX request. This works fine without trying to do the validation check before hand so I thought it easiest to just leave it in a function.

The submit button is like this:

<button type="submit" class="btn btn-primary" id="runAssesment"><i class="far fa-save"></i> Submit</button>

Currently, it takes two clicks of the submit button for the "non validated" styling to load in to the form. If i don't have that "event.preventDefault();" right at the top the form submits immediately (through defaults, as no method/action is set).

Where am I going wrong?