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
Valora esta entrada
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!

Entradas relacionadas:

Eliminar el comportamiento por defecto de un elemento html
- 229
Explicamos como desactivar el comportamiento por defecto de un elemento HTML mediante el uso del método javacript preventDefault()
Como modificar el destino de todos los enlaces de una web con javascript
- 91
Ejercicio con solución de la serie ejercicios javascript puro dónde se muestra como modificar el href de todos los enlaces de una web.
Como llamar nodos del DOM mediante javascript
- 382
Repasamos los distintos métodos directos e indirectos y estrategias para acceder e identificar los nodos del DOM de modo inequívoco.
Ejercicio – Cálculo del perímetro de un rectángulo mediante funciones
- 87
Ejercicio en el que se práctica de modo fácil la lógica de programación mediante el uso de funciones declaradas en JS.
Ejercicio – ¿Estamos en fin de semana?
- 83
Ejercicio dónde se resuelve un simple ejercicio mediante el uso de getDay() y se compara un switch y un if. Incluye solución.
Ejercicio JS: Uso de length y acceso a las posiciones de un array.
- 99
En este ejercicio se practica el método length y se usa para jugar con los arrays y acceder al primer elemento y al último de un vector.
Ejercicio – Corregir errores de sintaxis en funciones
- 82
Ejercicio javascript dónde se repasa la sintaxi de funciones. Corrige los errores.
Instrucción “this” de Javascript explicada paso a paso
- 199
Ejemplo explicado paso a paso para entender el concepto del this en javascript. Se empieza con el javascript en línea en el html para finalmente inicializar los eventos llamándolos directamente desde ...
Introducción a los eventos javascript
- 277
Repasamos las distintas formas que existen de asociar eventos javascript a etiquetas html. Ya sea por acoplamiento directo o como evento semántico. Comparamos también con addEventListener()
Factores que afectan al tiempo de carga de una página web
- 256
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
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.