0

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

1 respuesta 1

0

Las funciones de validar deberían retornar algo. Puedes retornar un true/false o también podrías retornar el mensaje de error. No obstante, tus validaciones son solamente de campo obligatorio, esto ya viene incluido en los elementos inputs con el atributo required

Otro detalle es que envolver todo en (function () { ... } ); sobra y ensucia el código

Sobre el form.reset() a mí me funciona bien, como puedes ver en el siguiente ejemplo

document.addEventListener('DOMContentLoaded', function () {
  var formulario = document.getElementById('form');
  var validarNombre = function (e) {
      if (formulario.nombre.value.length == 0) {
          console.log("Completá el Campo Nombre");
         return false;
      }
      return true;
  };

  var validarCorreo = function () {
      if (formulario.email.value.length == 0) {
          console.log("Completá el campo Correo Electrónico");
          return false;
      }
      return true;
  };

  var validarTelefono = function () {
      if (formulario.telefono.value == "") {
          console.log("Completá el campo Telefono");
          return false;
      }
      return true;
  };

  var validarMensaje = function () {
      if (formulario.mensaje.value.length == 0) {
          console.log("Completa el campo Mensaje");
          return false;
      }
      return true;
  };

        var validar = function () {
            return validarNombre() &&
            validarCorreo() &&
            validarTelefono() &&
            validarMensaje();
        };

  formulario.addEventListener("submit", handleSubmit);
  async function handleSubmit(event) {
     event.preventDefault();
    if(validar()){
     
     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');
       }
    }
     }
    
  
});
<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>

10
  • gracias por tu respuesta. Si, si lo uso separado a la funcion para recargar y limpiar los campos me funciona, por lo tanto entiendo que la logica esta bien. Pero yo lo que quiero lograr es validar cada campo del formulario por JS (sin required en HTML) y que esa validacion me devuelva algo y usar eso para ejecutar la funcion de recarga de pagina y limpieza de campos ... pero no se como hacer eso, vincular una funcion con otra para que se ejecute (o no) la segunda dependiendo lo que devuelva la primera. el 26 oct. 2022 a las 0:03
  • @BrunoMoscardini Es lo que te decía al principio, las funciones de validación deberían retornar "algo". Actualicé mi respuesta con la misma validación que tu tenías pero cambiando los retornos y funciona.
    – Yussef
    el 26 oct. 2022 a las 0:56
  • Muchisimas gracias, ahora si hace lo que esperaba creo que estaba poniendo mal los return de las validaciones y despues cuando llamaba la funcion. Muchisimas gracias!! el 26 oct. 2022 a las 18:43
  • Hola, tengo problemas con CORS, estoy enviando un formulario con protocolo de web https a otro https. ¿Qué puede estar fallando? has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. el 3 nov. 2022 a las 19:37
  • @BilbitBolson El asunto del CORS lo implementa el NAVEGADOR (ojo con esto). Donde el servidor al que se le envía una petición devuelve una cabecera indicando si acepta peticiones desde otro sitio o no lo hace, si pasa el último caso el navegador bloquea la solicitud. La solución es que si tienes acceso al otro servidor es configurarlo correctamente. Si no tienes acceso, lo que hay que hacer es tener otro servidor intermedio (a modo de proxy), donde tú le envías los datos a este intermedio y éste al otro servidor. Eso funciona porque el servidor no ocupará un navegador para enviar dicha info.
    – Yussef
    el 3 nov. 2022 a las 19:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.