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
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!

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.