I have a limited understanding of JavaScript, but with some copying and pasting I managed to make a form that gets sent via AJAX.

I'm also running the standard Boostrap 5 input validation. It all worked fine until I found out AJAX fires even without some fields missing.

Then I tried to put the AJAX stuff inside the validation function, but now I need to press "Submit" twice. I understand why, but I don't know how to solve it and would need some help.

This is what I came up with:

(function () {
  'use strict'

  // Fetch all the forms we want to apply 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')
        
        var frm = $('#orderform');
        frm.submit(function (e) {
                var formData = {
                firstName_r: jQuery('#firstName_r').val(),
                lastName_r: jQuery('#lastName_r').val(),
                action:'the_ajax_mail'
            };
            $.ajax({
                type        : 'POST', 
                url         : "<?php echo admin_url('admin-ajax.php'); ?>",
                data        : formData,
                encode      : true
            }).done(function(data) {
                console.log(data);        
                form.classList.remove('was-validated');
                document.getElementById('submitForm').disabled = true;
            }).fail(function(data) {
                console.log(data);
            });
            e.preventDefault();     
        });


        
      }, false)
    })
})()

I know the part with var frm = $('#orderform'); and frm.submit(function (e) { needs to go, but I have no idea how...