Desactivar el envío de un formulario con JQuery y preventDefault()

Desactivar el envío de un formulario con JQuery y preventDefault()

5
(1)

Antes de leer como aplicar jQuery al control del envío de un formulario html sería conveniente repasar esta entrada dónde se explica como hacerlo con javascript.

A modo de repaso diremos que intervienen el evento submit() asociado al formulario y la instrucción preventDefault().

Si se pueden usar en javascript entonces por supuesto podemos hacerlo con jQuery. Pues a la postre, jQuery no deja de ser un framework de javascript.

Veamos primero el html y a continuación el script.

ejemplo formulario
¿Como se verá por pantalla?

Formulario html

El propósito del formulario será enviar únicamente el formulario en caso de que se haya aceptado la cláusula RGPD (antigua LOPD, ley orgánica de protección de datos).

Para ello únicamente tenemos un botón de tipo submit y un input de tipo checkbox.

En el ejemplo propuesto en caso de error se comunicará por el input del formulario.

Fijaros en el html que también están los scripts de importación CDN de jQuery y un script en el que escribiremos el código.

<form action="https://google.es" target="_blank">
    <input type="email" placeholder="email" name="email"/>
    <input type="checkbox" name="rgpd" id="rgpd">
    <label for="rgpd">He leído y acepto la política de protección de datos y toda la parafernalia legal</label>
    <input type="submit" value="Enviar" name="enviar"/>
</form>

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    

<script></script>

Validación de un formulario usando jQuery

Existen 2 lugares en los que se pueden hacer click: el botón de enviar y el botón de aceptar RGPD. Cada uno de ellos dispara un evento click.

Explicación del código

En el caso de hacer click al botón de enviar se suceden las siguientes acciones:

  1. Evaluamos el evento submit y pasamos una variable de nombre e que captura el evento en curso que no es otro sino submit.
  2. Mediante la variable condición evaluamos si el campo #RGPD está seleccionado o no. El método .is() devuelve cierto cuando el nodo o lista de nodos cumplen una condición y falso cuando no. Concretamente evaluamos la condición :checked.
  3. En caso de cumplirse que #RGPD está activado se procede al envío y añadimos el atributo disabled con el que desactivamos el botón y evitamos el envío 2 veces consecutivas del formulario.
  4. En caso de no cumplirse que #RGPD está activado se paraliza el envío del formulario mediantee.preventDefault()
  5. Adicionalmente cuando se modifica el foco del input de tipo email se entiende que el usuario ya ha hecho alguna modificación y se elimina el atibuto disabled de modo que se puede volver a enviar el formulario.
$(document).ready(function(){
        $("form").submit(function(e){
            var condicion = $("#rgpd").is(":checked");
            if(!condicion){
                e.preventDefault();
            }else{
                $("[name='enviar']").click(function(){
                    $(this).attr("disabled","disabled");
                });
            };  
        });
        $("input").blur(function(){
            $("[name='enviar']").removeAttr("disabled");
        })
        
    });

OBSERVACIÓN.

En cualquier caso el input usado es de tipo email y html5 validará siempre que efectivamente el formato sea el adecuado. De modo que si estás haciendo pruebas de si te funciona o no el ejemplo es más cómodo si usas un<input type="text">en lugar de<input type="email">.

¡Hola querido lector@!

Hasta aquí todo lo que necesitamos saber para desactivar el envío de un formulario web.

Ahora deberíamos aprender cual es la mejor forma de comprobar que un número es un número y que un texto tiene un formato determinado.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 5 / 5. Votos: 1

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.