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

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

Print Friendly, PDF & Email
Desactivar el envío de un formulario con JQuery y preventDefault()
Valora esta entrada
Antes de leer esta entrada sería conveniente que te pasaras por el tutorial de javascript y repasar las dos propuestas mediante las cuales podemos desactivar el envío de un formulario.

Saber frenar el envío de un formulario html es el primer paso para hacer una validación efectiva de los campos introducidos por los usuarios.

En dicha entrada se proponen 2 métodos. El primero mediante el control del evento submit y el segundo mediante preventDefault().

Hoy usaremos preventDefault()  combinado con jQuery para conseguir exactamente el mismo propósito.

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

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.

Adicionalmente prevemos un campo para indicar si el formulario se ha enviado con éxito o no.

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.

formulario web
Formulario web preparado par ser validado con JQuery

Validación de un formulario con preventDefault() y 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. Preventivamente desactivamos el botón de enviar y limpiamos el contenido de #estado envío que pudiese haber de antiguos errores.
  2. 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 elimina el atributo disabled que anteriormente habíamos asignado al input mediante jQuery. En #estadoEnvio introducimos el texto de aviso que se ha enviado el email y lo decoramos de color verde y en italica.
  4. En caso de no cumplirse la condición #RGPD entonces no hace falta eliminar disabled. En #estadoEnvio introducimos el texto de aviso correspondiente y lo decoramos rojo y en mayúsculas.

Hasta aquí el funcionamiento del botón enviar es el correcto.

Sin embargo se da el caso que el formulario todavía no es 100% funcional porqué si un usuario hiciese click en enviar con #RGPD sin seleccionar y luego aceptara la condición entonces ya no podría enviar el formulario de nuevo porqué el botón se quedaría inactivo.

Para solucionarlo nos aseguramos que cuando el usuario acepte la condición #RGPD  eliminamos el atributo disabled que pudiera tener el botón de envío.

código jquery validación datos
Código jquery para validar si un formulario cumple RGPD.
resultado envío formulario erroneo
Envío erroneo formulario web
resultado envío formulario correctamente validado
Confirmación envío correcto formulario web

¡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.

Será en la próxima publicación de este tutorial.

¡hasta mañana!

Entradas relacionadas:

Como llamar mediante jQuery a los nodos de un documento web
- 169
En esta entrada vemos como llamar nodos del DOM mediante jQuery haciendo la transición desde javascript. Vemos las similitudes y diferencies en Javascript y como podemos hacer la transición de JS a jQ...
¿Que es jQuery?
- 215
Bienvenidos a un completo tutorial ordenado por dificultad creciente para todos aquellos que queráis aprender jQuery. Previamente es aconsejable un buen dominio de html, css y javascript. Todos estos ...
Como comprobar si una página ha cargado la librería jQuery
- 163
El primer paso para empezar a escribir jQuery es tener la certeza de que la librería efectivamente se está cargando. No serías el primero que lo hace todo bien pero no le funciona nada porqué le falla...
¿Empezar por Javascript o Python? ¿Continuar con jQuery o angular? ¿Y node.js?...
- 224
¿Qué aprender primero? Gentileza de Stack Overflow algunas pistas. ¿Primero javascript o python? ¿Continuar con jquery o node.js?
Como navegar entre los nodos de un documento web mediante jQuery
- 177
Hay casos en los que es más práctico navegar por el DOM para llegar hasta los nodos con los que queremos interactuar. Comparamos los métodos usados en javascript puro con los que usaríamos en jQuery....
Como acoplar jQuery en un documento web y errores típicos a evitar
- 157
Tutorial paso a paso dónde explico como acoplar jQuery en un documento web. Se detallan también algunos errores típicos que no deberías cometer.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.