Lección 3
Validación de formularios
La validación de formularios es un aspecto muy importante cuando se crea una página web que capturará información, y más aún si esta información será almacenada en una base de datos.
La validación consiste en verificar que la información ingresada, sea correcta y coherente de acuerdo a lo que se requiere en cada campo. Es decir, se verifican cosas como si un campo que es obligatorio esta vacío, si un campo que debe contener valores numéricos tiene un número asignado, si los valores ingresados en un campo están en cierto rango, etc.
Ya que hemos aprendido a acceder con JQuery a los valores que contiene un campo, podemos verificar y validar utilizando condiciones de programación, y así determinar si dejamos que los datos del formulario se envíen o no.
Para que los valores que contienen los campos de un formulario, se envíen a otra página, debemos colocar un botón que se encargará de ejecutar esta acción. En el momento que se dé clic en este botón se debe realizar la validación del formulario. Las instrucciones que realiza la validación, deben estar encerradas en una porción de código llamada función, las cuales se explicaran con más detalle en la siguiente lección.
La manera de determinar en JQuery si se ha hecho click sobre un botón es la siguiente:
Donde idBoton es el id que se le asignó al botón dentro del formulario. Ejemplo:
Ahora vamos a realizar un pequeño ejemplo en el que validaremos si el valor asignado a un campo de un formulario se encuentra entre 1 y 99.
Con la instrucción if (num > 0 && num<100), estamos preguntando si la variable num es mayor que cero (0) y si num es menor que cien (100), de ser así se muestra una ventana con el texto “El número está en el rango permitido”, y de no ser así muestra una ventana con el texto “El número no está en el rango permitido”.
En este ejemplo aunque se valida lo que requeríamos inicialmente, no estamos impidiendo que se envíen los datos a la siguiente página. Para esto vamos a modificar un poco nuestro código.
Lo primero que haremos es agregar la siguiente propiedad a la etiqueta form:
Con onSubmit estamos diciendo que cuando se envíe los datos del formulario, llame una función llamada validar(), y si esta función contesta verdadero (true) se envía el formulario y se abre la siguiente página especificada en la propiedad action, de lo contrario si contesta falso (false) no se enviará el formulario y no se abrirá la página.
Otros ejemplos de validaciones
Si un campo contiene la letra F o M
Si un campo contiene un número mayor al de otro campo
Si un campo contiene un valor diferente a la letra X
