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:

Ejercicio – Sumas con letras
- 187
En este ejercicio vemos de forma práctica si la suma de valores numéricos o strings resulta en una suma o una concatenación.
Sintaxi y gramática básica de las variables en javascript
- 295
Javascript es un lenguaje. Tiene una sintaxis y una gramática básicas que hay que aprender. Vemos cuales son estas normas para el caso de las variables en JS y dónde debes hacer hincapié en no equivoc...
Ejercicio – Generación iterativa de encabezados html
- 141
Ejercicio dónde se generan los encabezados h1 a h6 mediante javascript. Incluye solución.
Resumen de carácteres extraños en Javascript
- 307
Muchos alumnos me habéis pedido esta entrada sobre los carácteres , . : ; [] {} () en Javascript. Y es que tenéis razón. Hay pocos recursos en internet que los aglutinen y nos expliquen dónde debemo...
Ejercicio JS – Formulario con un campo oculto
- 113
Ejercicio javascript con un campo que se muestra cuando se selecciona un asunto determinado mediante un select. Incluy resolución.
Onresize window para calcular el width y el height disponibles
- 416
Explicamos como podemos obtener el ancho y la altura real disponibles de la ventana del navegador mediante Javascript puro y con jQuery
Introducción a las animaciones Javascript: setInterval() y setTimeout()
- 823
Resumimos las funciones setInterval(), clearInterval y setTimeout(). Cuales son sus parámetros, que es una función anónima y como la llamamos.
Eliminar eventos Javascript .removeEventListener()
- 1170
Ejemplos prácticos de como usar addEventListener() y removeEventListener() del tutorial gratuito de Javascript (y apuntes para mis alumnos)
Ejercicio – corrección de errores en javascript. Variables y strings.
- 155
En este ejercicio practicamos la diferencia entre usar un string y una variable. También otras normas básicas de sintaxis de javascript.
Ejercicio – Crear una lista de recordatorios
- 144
Ejercicio javascript solucionado para crear una lista de recordatorios y que es capaz de resetear todos los nodos. Apuntes de clase.
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.