Validation d'un petit formulaire avec jQuery

Validación de un pequeño formulario con jQuery

Este ejercicio lleva a cabo la validación de un pequeño formulario, el cual hemos validado anteriormente con javaScript, pero esta vez lo vamos a validar escribiendo nuestros scripts en jQuery. Gracias a esta librería basada en javaScript escribiremos menos código para obtener el mismo resultado que si desarrollamos nuestro código directamente en javaScript. Esto se debe a que jQuery nos permitirá seleccionar y modificar de una forma más directa los diferentes elementos del DOM, pudiendo concatenar varias instrucciones que afectarán a un mismo elemento en una única linea de código. Los selectores que utiliza jQuery están basados en los selectores css.

La validación que vamos a llevar a cabo la realizaremos sin utilizar el plugin jQuery validation, es decir, vamos a escribir nuestras propias funciones utilizando también algunas expresiones regulares para ir tomando contacto con ellas.

Claves del desarrollo de la validación en jQuery:

Todas las funciones y todo el código que vamos a desarrollar en nuestro archivo validation_jquery.js va a estar ubicado dentro de una gran función anónima que tiene la siguiente forma: $(funcition() {…});. La principal misión de esta función es la de esperar a que la página haya cargado y que los elementos del DOM estén disponibles para ejecutar el código que contiene en su interior.

Al comienzo de la función de validación que vamos a llamar validate_form() declararemos la mayor parte de las variables que utilizaremos a lo largo de la validación del formulario. De esta manera vamos a poder disponer desde el comienzo de la función de validación de todos los elementos del formulario que nos interesará analizar o modificar.

variables de la función validate_form()

Después de ese bloque de variables vamos a crear una función muy sencilla que se llamará reset_warnings() y que se encargará de modificar el color de todos los <label> de todos los campos del formulario cada vez que comience una nueva validación. Más concretamente, el objetivo que perseguimos es el de aplicar el color negro original a todos los <label> de todos los campos del formulario. De esta forma, aunque la función validate_form() se ejecute varias veces consecutivas, nunca se podrán mostrar varios <label> en color rojo al mismo tiempo. Por lo tando, después de definir la función reset_warnings() tendremos que ejecutarla para que pueda reaizar su misión:

hace falta resetear todos los avisos de error para cada nueva validación del formulario

Para validar el campo name_field del formulario utilizaremos dos if. En el primero vamos a comprobar si el campo name_field esta vacio, y en el segundo utilizaremos la expresión regular regEx_whitespace para verificar si el usuario ha introducido únicamente espacios en blanco o si el nombre que ha introducido está precedido de espacios en blanco. Para comprobar si se cumple el patrón que guarda esta regEx utilizaremos el método .test(). De forma que este método nos devolverá siempre un valor booleano, que será true en caso de que el campo comience o solo contenga espacios en blanco, o false en caso contrario.

validación del campo nombre del formulario

Gracias al método .css() podremos modificar los estilos css de cualquier elemento del archivo html. Por ejemplo, en el código de validación del campo nombre podemos ver la instrucción que utilizaremos en caso de error de validación, y que mostrará en rojo el texto ubicado dentro del elemento <label> correspondiente. En el caso del campo nombre el <label> tiene la id = "name_label" y se encuentra memorizado en la variable var name_label.

La validación del campo nobre será a grandes rasgos la misma que para el resto de <input> del formulario. Cada vez que se produzca un error en la introducción de datos mostraremos un alert con un mensaje que indicará cual es la naturaleza del fallo. También modificaremos el atributo placeholder del campo correspondiente para mostrar un pequeño mensaje que ayudará al usuario en la correcta introducción de datos. El método .attr() será el que nos permitirá modificar los atributos de cualquier elemento del DOM, el cual es equivalente al método .setAttribute() de javaScript.

En el caso de los demas <input> de tipo texto solo tendremos que adaptar la validación que hemos utilizado en el campo name_field a las diferentes caracteristicas de los datos que espera recibir cada campo. También usaremos las regEx que correspondan al patrón de datos requerido en cada caso en concreto:

validación del campo edad del formulario
validación del campo teléfono del formulario

Para validar el campo género tendremos que guardar en un array todas las opciones de tipo radio que se proponen en dicho campo. En este caso guardaremos los dos valores del radio button, que tienen asignado el atributo name="gender", dentro de la variable var radio. Dicha variable será un array que contendrá dos elementos, uno con el valor hombre y el otro con el valor mujer. Después, gracias al método .is(“:checked”) podremos verificar si hay algún valor del array radio que ha sido seleccionado. Siguiendo estas indicaciones la validación del campo género quedará de la siguiente manera:

validación del radio button utilizado para la selección del género

En cuanto a la validación del campo <select> usaremos la propiedad .prop(“selectedIndex”) para guardar en la variable var select_choice el índice de la opción del <select> escogida por el usuario. El índice que guarda por defecto dicha propiedad es el número 0, que hace referencia a la primera opción del <select>. Esa primera opción no será en si misma una opción válida ya que no es más que un mensaje dirigido al usuario invitandole a escoger una de las opciones de la lista desplegable: "Triez un pays de résidence". Por lo tanto, si la variable select_choice guarda el valor 0 esto quiere decir que no se ha elegido ningún país de los que están disponibles en la lista:

validación del select que permite seleccionar un país de residencia

A parte de la función de validación validate_form(), vamos a definir otras dos funciones, que son prácticamente idénticas entre si, que limitarán el tipo y la cantidad de caracteres que el usuario podrá introducir en los campos edad y teléfono del formulario. Para ello seleccionaremos los códigos de las teclas que serán válidas para cada caso y los almacenaremos en una variable de tipo array que se llamará var valid_keys. Estas variables serán de ámbito local cada una en su correspondiente función, por eso podemos nombrarlas de la misma manera sin que haya ningún conflicto entre las dos funciones que vamos a definir. Dichas funciones se llamaran restrict_age(event) y restrict_telephone(event), a las cuales les pasaremos como parámetro el objeto event gracias al cual podremos capturar los códigos de las teclas pulsadas por el usuario.

función que restringe los carácteres introducidos en el campo del formulario correspondiente a la edad

En la imagen anterior podemos ver el código de una de las dos funciones que van a imponer una restricción de teclado en un <input> de tipo text, en concreto el código de la función restrict_age(event) que actuará sobre el campo #age_field. En dicho ejemplo se puede observar que la restricción de las teclas que se podrán utilizar dentro del campo edad la realizamos mediante un for, que nos permitirá recorrer el array var valid_keys. Dicho for contendrá a su vez un if y un while. Gracias a la condición que impone el if verificaremos que el código de la tecla pulsada coincide con los códigos que hemos definido como válidos en el array valid_keys. Y gracias al while controlaremos que el número de caracteres utilizados por el usuario nunca supere el número máximo definido dentro de la variable var max_char_amount.

Finalemente, para dar por concluido el archivo validation_jquery.js faltará vincular las funciones que hemos creado con los correspondientes elementos del formulario y los eventos que las ejecutarán:

enlace de las funciones que llevarán a cabo la validación y las restricciones con los correspondientes eventos que las ejecutarán