Buenos dias estoy teniendo un problema con la recarga del formulario una vez enviado. Estoy utilizando Formspree para gestionar el envio del formulario por correo electornico. Las validaciones por javascript me funcionan pero lo que quiero es que una vez validado y enviado el formulario, me recargue la pagina del formulario y borre los campos y no se quede en la pagina de Formspree. En resumen la segunda funcion quiero que se ejecute una vez validados TODOS los campos del formulario de lo contrario que no se ejecute. Intente poniendo la funcion dentro de un if y retornando un valor booleano en la funcion "validar" pero no funciona como espero seguramente lo implemento mal.
Formulario HTML
<form id="form" action="https://formspree.io/f/xjvzonwa" method="POST">
<h2>ESCRIBENOS</h2>
<input type="text" name="nombre" placeholder="Ingrese su Nombre" pattern="[a-zA-ZÀ-ÿ]+" title="Sólo Podés Ingresar Letras Mayúsculas, Minúsculas con Acento y Espacios">
<input type="email" name="email" placeholder="Ingrese su Correo Electronico">
<input type="number" name="telefono" placeholder="Ingrese su Numero de Telefono" pattern="[0-9]+" title="Sólo Podés Ingresar Números">
<textarea name="mensaje" placeholder="Escriba aquí su mensaje"></textarea>
<button type="submit" id="boton">ENVIAR</button>
</form>
Y este es el codigo JAVASCRIPT
document.addEventListener('DOMContentLoaded', function () {
//Validacion campos formulario
(function () {
var formulario = document.getElementById('form');
var validarNombre = function (e) {
if (formulario.nombre.value == 0) {
alert("Completá el Campo Nombre");
e.preventDefault();
}
};
var validarCorreo = function (e) {
if (formulario.email.value == 0) {
alert("Completá el campo Correo Electrónico");
e.preventDefault();
}
};
var validarTelefono = function (e) {
if (formulario.telefono.value == "") {
alert("Completá el campo Telefono");
e.preventDefault();
}
};
var validarMensaje = function (e) {
if (formulario.mensaje.value == 0) {
alert("Completá el campo Mensaje");
e.preventDefault();
}
};
var validar = function (e) {
validarNombre(e);
validarCorreo(e);
validarTelefono(e);
validarMensaje(e);
};
formulario.addEventListener("submit", validar);
//Recarga formulario un vez validado y enviado, limpiando los campos.
//!NO FUNCIONA
formulario.addEventListener("submit", handleSubmit)
async function handleSubmit(event) {
event.preventDefault()
const form = new FormData(this);
const response = await fetch(this.action, {
method: this.method,
body: form,
headers: {
'Accept': 'application/json'
}
})
if (response.ok) {
this.reset();
alert('Gracias por contactarte con nosotros. En breve nos estaremos comunicando');
}
}
}())
});