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

5
(1)

Publicado

Aviso importante web en obras

Es posible que el contenido que estás visualizando tenga un formato un poco raro o que se haya perdido algún contenido. Esto se debe a que en 2023/09 decidí renovar la página y con más de 1000 escritos el trabajo de irlos revisando uno por uno es agotador. Poco a poco iré corrigiendo todos los contenidos. ¡Gracias por la comprensión!

ordenador con código jquery

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.
Desactivar el envío de un formulario con JQuery y preventDefault() 1

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

Todavía no hay votos. Sé el primero en valorar la entrada.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *