Validation d'un formulaire d'inscription avec jQuery

Inscrivez-vous pour recevoir toutes nos actualités. Les champs à remplir obligatoirement apparaissent en caractères gras.










Logotipo Your Graphic Partner

Validación de un formulario completo en jQuery

En esta ocasión vamos a realizar la validación de un formulario que contiene muchos de los campos típicos que podemos encontrar en cualquier formulario de inscripción, utilizando la librería jQuery. Algunos de dichos campos serán de tipo <input> que van a almacenar datos de tipo texto o de tipo numérico. En concreto le vamos a solicitar al usuario su nombre, su apellido, su fecha de nacimiento, un número de teléfono, su código postal y su correo electrónico. Para verificar el contenido de dichos campos utilzaremos una serie de expresiones regulares que guardaremos en diferentes variables. Además, dentro de este formulario encontraremos un campo <select>, un campo <input> de tipo checkbox, y otro campo <input> de tipo radio button, los cuales van a requerir un tratamiento diferente que los demás campos del formulario.

La validación del formulario se ejecutará cuando pulsemos el botón de enviar. Cada vez que se produzca un error de validación se mostrará un mensaje en rojo, en la parte superior del formulario, que indicará cual es el error y cuales son los pasos a seguir para introducir de manera correcta dichos datos. También se modificará el color del <label> correspondiente al campo donde se ha producido el error.

Los dos últimos campos del formulario serán opcionales por lo que el resto de datos podrán ser enviados aunque estos dos campos queden vacíos.

Claves de la validación con jQuery:

El archivo jQuery que contiene el código de validación de este formulario se llama jquery_validation.js. Dicho archivo va a comenzar con la función anónima $(function() {...}); dentro de la cual vamos a escribir todo nuestro código (funciones, instrucciones y variables). La misión de dicha función es esperar a que todos los elementos del DOM estén disponibles para comenzar a ejecutar los scripts que contiene.

La función de validación, a la cual se le ha dado el nombre de validate_form(), va a contener unas cuantas variables que definiremos al principio de dicha función y que nos servirán para seleccionar los diferentes elementos del formulario que analizaremos y modificaremos a lo largo de la validación. Algunas de estas variables almacenarán las expresiones regulares que nos ayudarán a verificar los diferentes datos introducidos por los usuarios. Por otro lado, la manera en la que se han seleccionado el radio button, correspondiente al campo género, y el checkbox correspondiente al tipo de suscripción, dará lugar a dos variables, var gender y var suscription, que serán dos arrays. Finalmente también merece la pena explicar el funcionamiento de la variable var country_selected que hace referencia a la propiedad "selectedIndex" del campo <select>. Dicha propiedad guardará el valor 0 si la primera opción del <select>, que es la que queda siempre seleccionada por defecto, continua sin ser modificada. De hecho esta primera opción no guarda más que un mensaje invitando al usuario a escoger uno de los países de la lista desplegable. Una vez que seleccionemos un país de la lista la propiedad "selectedIndex" cambiará y guardará el número de índice de la opción seleccionada.

variables de la función validate_form()

A continuación de este grupo de variables vamos a declarar la función reset_warnings() que va a eliminar todos los mensajes de error que hayan podido ser mostrados en validaciones anteriores, así mismo va a modificar el color de los <label> de todos los campos del formulario para evitar que quede ninguno en rojo. De esta manera nos aseguramos que nunca se mezclen los resultados de posibles validaciones consecutivas.

Para mostrar esos mensajes de error de validación utilizaremos el método .append(), que nos permitirá ubicar nuevos elementos html como últimos hijos de algún elemento ya existente. En este caso los elementos <p> que contendrán los mensajes de error dentro del elemento <header> del formulario. También utilizaremos la propiedad .css que nos permitirá modificar el color del texto de los <label> de los campos que contengan algún fallo, y el método .remove(), que nos permitirá eliminar los elementos <p> que contienen los mensajes de error, evitando como hemos dicho antes que se acumulen nuevos mensajes junto a otros mensajes anteriores.

código de la función reset_warnings()

Llegados a este punto de la función validate_form() vamos a comenzar a escribir el código de validación de cada uno de los campos del formulario. Empezaremos por el campo nombre, que e el primero de todos, teniendo en cuenta que es imprescindible seguir el orden establecido en el formulario. Para verificar los datos introducidos en este campo vamos a utilizar dos if, en los que definiremos las condiciones que no se deben cumplir si el formulario se rellena correctamente. Mediante el método .test() y la regEx_whitespace averiguaremos si el nombre introducido comienza o solo contiene espacios en blanco. Y gracias a la propiedad .length verificaremos si el usuario ha introducido algún dato o no en dicho campo.

código de validación del campo correspondiente al nombre

Esta será la validación que implementaremos en todos los campos del formulario, excepto en el <select>, en el radio button y en el checkbox, ya que tienen características diferentes. Por lo tanto podemos decir que la validación del campo nombre es de alguna manera una validación genérica, a pesar de que la modificaremos ligeramente para adaptarla a las características de los datos que debe recibir cada campo, y para ajustar los mensajes de error a cada fallo concreto. Un ejemplo de las variaciones que introduciremos en dicha validación genérica es el código que implementaremos para verificar los datos del campo correspondiente al número de teléfono:

código de validación del campo correspondiente al teléfono

Ahora vamos a ver como llevar a cabo la validación de los campos <select>, radio button y checkbox. El primero de los tres es el campo <select> que nos propone seleccionar un país de residencia dentro de una lista desplegable. Para verificar si el usuario ha elegido un país o no usaremos la variable var country_selected, la cual ha sido definida al inicio de la función validate_form() utilizado la propiedad .prop(“selectedIndex”). Esta propiedad devolverá el valor 0 si la primera opción del <select>, que simplemente guarda un mensaje, continua a ser la opción marcada por defecto. Esto querrá decir que el usuario no ha seleccionado ningún país de los que están disponibles en la lista desplegable. El código de validación es el siguiente:

código de validación del campo correspondiente a la selección de país

Para validar el radio button del campo género vamos a guardar en la variable var gender de tipo array todas las opciones del radio button. En este caso solo habrá dos opciones a elegir, el valor hombre o el valor mujer. Después, mediante un if y gracias a la propiedad .is(:checked) podemos verificar si el usuario ha escogido alguna de las opciones disponibles. Si la propiedad devuelve el valor false quiere decir que no se ha seleccionado ninguna opción, por lo que mostraremos el correspondiente mensaje de error y haremos que la función validate_form() devuelva el valor false:

código de validación del campo de selección del campo correspondiente al género

A su vez, el código de validación del checkbox también será diferente a la del resto de campos del formulario. Partiremos de la variable var subscription en la que guardaremos las diferentes opciones de checkbox. Después tendremos que recorrer dicho array mediante un for, en busca de alguna opción que haya sida seleccionada, para lo cual nos hará falta implementar un if dentro de dicho for. La condición de este if utilizará la instrucción jQuery(subscription[i]) y la propiedad .is(“:checked”) para analizar una por una las opciones del checkbox en busca de alguna que haya sido seleccionada. Al recorrer todas las opciones del checkbox , en caso de que se encuentre alguna opcion que haya sido seleccionada por el usuario, entonces modificaremos el valor de la variable booleana var subscription_flag, que guardaba por defecto el valor false, para asignarle el valor true. Después, una vez fuera de este for implementaremos un if que tendrá como condición de entrada que la variable subscription_flag guarde todavía el valor false. Si la validación entra en dicho if esto quiere decir que no se ha elegido ninguna de las opciones del checkbox, por lo que mostraremos el mensaje de error correspondiente y devolveremos el valor false que impedirá que el formulario sea envidado.

código de validación del checkbox correspondiente al campo de selección del tipo de suscripción

Una vez que hemos escrito todo el código de validación de la función validate_form(), que verificará cada uno de los campos del formulario mediante las correspondientes variables y estructuras de control de flujo, debemos recordar que falta un último detalle. Y es que la última instrucción de la función debe devolver el valor true, return true, lo cual permitirá enviar todos los datos introducidos por el usuario al correspondiente servidor en caso de que no haya habido ningún error.

Como en otros ejercicios anteriores que también están disponibles en este mismo sito web, nuestro archivo jQuery jquery_validation.js va a contener otra función más que nos permitirá limitar el número de caracteres introducidos en los campos nombre y apellido, además de permitirnos seleccionar cuales serán los caracteres permitidos y cuales serán los caracteres que quedarán bloqueados. Dicha función se va a llamar restrict_characters(), y como se puede observar en la imagen situada bajo este párrafo, esta función va a recibir el objeto event como parámetro, mediante el cual podremos captar cada una de las teclas que pulsará el usuario. Como está función ya ha sido explicada en ejercicios similares, simplemente se va a mostrar su código para poder refrescar la memoria:

función de restricción de introducción de caracteres

Por último, como es lo habitual después de definir todas las funciones que interactuarán con el archivo html de turno, no quedará más que vincular dichas funciones a los correspondientes elementos del formulario y a los eventos que las van a desencadenarán.

enlace de las funciones del archivo javascript con los correspondientes eventos que las ejecutarán