Tengo una comprensión limitada de JavaScript, pero con algo de copiar y pegar logré crear un formulario que se envía a través de AJAX.

También estoy ejecutando la validación de entrada estándar de Boostrap 5. Todo funcionó bien hasta que descubrí que AJAX se dispara incluso sin que falten algunos campos.

Luego traté de poner las cosas de AJAX dentro de la función de validación, pero ahora necesito presionar "Enviar" dos veces. Entiendo por qué, pero no sé cómo resolverlo y necesitaría ayuda.

Esto es lo que se me ocurrió:

 (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) }) })()

Conozco la pieza con var frm = $('#orderform'); y frm.submit(function (e) { necesita ir, pero no tengo idea de cómo...