Validación de formularios web: Como desactivar el envío con Javascript

Validación de formularios web: Como desactivar el envío con Javascript

Print Friendly, PDF & Email
Validación de formularios web: Como desactivar el envío con Javascript
1 (20%) 1 voto

La validación de formularios es una de las principales razones que dio lugar al origen del lenguaje de programación de estudio en este tutorial.

Los programadores de los 90′ se enfrontaban al reto de lentitud de la red.

Les preocupaba el tiempo que tomaba enviar un formulario hasta el servidor y que este tuviera que validarlo tantas veces como se equivocara el usuario rellenando los campos de datos.

Se pensó que sería una buena idea aprovechar la potencia de cálculo del ordenador del internauta para que previamente al envío del formulario hubiese una primera validación en el lado cliente.

Esto no quita que luego los formularios se deban validar tanto en el lado cliente como en el lado servidor.

Típicamente se trata de comprobar que los campos reservados estén rellenados, que los textos sean textos, que las direcciones de correo sean direcciones de correo… simplemente que se siga la lógica.

Pero atención, lejos de comprobar todos los casos descritos nosotros vamos a ver aquello que en mi opinión es lo que siempre trae más quebraderos de cabeza cuando estamos aprendiendo javascript por primera vez.

Veamos entonces como podemos hacer para desactivar el envío del formulario web cuando este no cumpla una serie de requisitos básicos.

Se explican 2 métodos de hacerlo.

Que cada uno se quede con el que le guste más.

Forma clásica

Fijémonos en la imagen adjunta como la etiqueta <form> incluye un atributo onsubmit desde el que llamamos a la función validar().

onsubmit es el método que se ejecuta en el momento de enviar un formulario web. Puede ser activado con un <input type=»submit»> o directamente con el evento submit. Según cada formulario nos sea más cómodo.

Si dicho evento se deshabilita entonces no se envía el formulario web.

formulario web html
Formulario web html preparado para validación clásica

En el caso de que el input con name «nombre» esté vacío se ejecuta «return false».

Return tiene la propiedad de hacer que la función se deje leer.

En caso contrario la función sigue su comportamiento línea a línea normal.

validación de formularios con JS método clásico
Método clásico para la validación de formularios

Validación de un formulario con preventDefault()

En este caso fijémonos como el <form> es más limpio.

Se ha desvinculado el máximo possible el javascript del html y este se inicializa con un addEventListener directamente en el <script>..

formulario html

Cuando se solicita el evento submit lo que hacemos es capturar el evento. Sería recomendable que le deis un vistazo a esta lectura si no estáis muy familiarizados con la forma como podemos capturar eventos y la información que transportan con ellos.

La idea es que vamos a deshabilitar el comportamiento normal de onsubmit si se detecta que la información rellenada por el usuario no es la correcta.

código js validación formulario con preventDefault()
Código js para la validación de un formulario con preventDefault()

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