¿Cómo puedo publicar ajax con validación de formulario en bootstrap 5?
// Example starter JavaScript for disabling form submissions if there are invalid fields (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) }) })()Tengo un gran problema con esto. ¿Puede alguien ayudarme?
El código de inicio anterior proporcionado por la documentación de arranque utiliza el método checkValidity() de la API de validación de restricciones de JavaScript para validar el formulario.
El método HTMLInputElement.checkValidity() devuelve un valor booleano que indica la validez del valor del elemento. Si el valor no es válido, este método también activa el evento no válido en el elemento.
Puede realizar la solicitud ajax si la validación es exitosa como se muestra a continuación,
if (!form.checkValidity()) { event.preventDefault() event.stopPropagation() }else{ //make your ajax request here }Aquí hay un ejemplo de solicitud ajax usando JavaScript Fetch API y FormData API
if (!form.checkValidity()) { event.preventDefault() event.stopPropagation() }else{ try { const postData = new FormData(form) const response = await fetch('url', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(postData) }); //Response from server const data = await response.json(); }catch(e){ //handle error console.log(e) } }