Validación de un pequeño formulario en javaScript

Comenzando con la validación de formularios en javaScript:

En este ejercicio vamos a comenzar con la validación de un formulario bastante sencillo, de manera que iremos tomando contacto con las restricciones que podemos implementar, siempre del lado cliente, en cada uno de los campos que componen un formulario. Con esa serie de restricciones nos aseguraremos en la medida de lo posible que los datos introducidos por el usuario corresponden con el tipo de datos que nos interesa recibir.

En el archivo validation_javascript.js que esta vincualado al archivo html que contiene este formulario hay definidas varias funciones escritas en javaScript que limitarán el uso del teclado dentro de los campos "nombre”, “edad" y “teléfono”. Vamos a restringir a 20 valores no numéricos la cantidad de caracteres del <input> nombre, hasta 3 valores numéricos los caracteres del <input> edad, y hasta 16 valores numéricos los caracteres del <input> teléfono. También vamos a permitir utilizar ciertas teclas especiales como son el backspace, el spacebar, la tecla delete, el left arrow y el right arrow para que el usuario realice la introducción de datos de una forma más amigable.

El titulo <label> de cada campo cambiará de color, de negro a rojo, cuando se detecte un error de validación. Dicho <label> volverá a su color negro original siempre que realicemos una nueva validación del formulario, gracias a una pequeña función que definiremos dentro de la funcion de validación que evitará que se muestren en rojo varios <label> del formulario al mismo tiempo.

Además, en caso de que falten o se introduzcan mal los datos del formulario también usaremos una serie de alerts para indicar con mensajes cual es el fallo a corregir. Con el mismo objetivo indicaremos ciertas instrucciones dentro de los atributos "placeholder" de cada <input> que guiarán al usuario en la introducción de los datos y en la corrección de los posibles errores.

El radio button género requerirá también que el usuario seleccione obligatoriamente un valor. En caso de no ser así se mostrará un alert informando del fallo.

Finalemente, al igual que en el campo género, será obligatorio seleccionar una de las opciones disponibles dentro del <select> “País de residencia”. Si ninguna de esas opciones es seleccionada se mostrará un alert, como en ocasiones anteriores, que indicará que falta por seleccionar una país de residencia.

Claves del desarrollo en javaScript:

La función validate_form() va a contener una serie de variables, métodos y estructuras de control de flujo que nos permitirán definir las instrucciones de validación para cada uno de los campos que componen el formulario. Si no hay ningún error al introducir los datos en el formulario, y no hay ningún campo que haya quedado vacio, entonces la función validate_form() devolverá el valor true permitiendo enviar los datos al servidor.

Para trabajar con los diferentes elementos del formulario los almacenaremos en variables, de esta forma nuestro código será más eficiente a la hora de acceder y modificar posteriormente dichos elementos.. En javaScript podremos seleccionar cualquier elemento de un documento html que tenga asignado un atributo id gracias al método .getElementById(). También podremos seleccionar varios elementos a la vez, como por ejemplo las opciones que ofrece un radio button, mediante el método .getElementsByName().

Para recuperar el valor de un <input>, es decir los datos que ha introducido el usuario en dicho campo, utilizaremos el método .value

Siguiendo estas indicaciones vamos a comenzar definiendo al principio de la función validate_form() la mayoría de las variables que utilizaremos a lo largo del código de dicha función. De esta manera nos aseguramos que todas las variables quedan disponibles desde el principio del código de la función:

variables globales de la función validate_form()

También vamos a utilizar algunas expresiones regulares para validar los campos <input> del formulario, como por ejemplo la regEx_whitespaces que es una expresión regular que detecta las cadenas de texto que comienzan por uno o más espacios en blanco. Gracias a esta expresión regular y al método .test() podremos verificar si un campo del formulario solo contiene espacios en blanco, o los datos introducidos en dicho campo comienzan por un espacio en blanco.

Continuaremos definiendo una sencilla función, que se llamará reset_warnings(), que modificará el color de todos los <label> del formulario, asignando a dichos textos su color negro original. Gracias a esta función evitaremmos que se muestren en rojo varios <label> a la vez, aunque haya varios errores de validación al mismo tiempo en el formulario, de esta forma la resolución de los posibles errores de validación se resolverán siempre en orden, uno detrás de otro. Después de definir la función la ejecutaremos para que realice su misión al comienzo de cada validación del formulario:

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

Mediante el método .style de javaScript podremos modificar los diferentes estilos css de un elemento concreto del documento html. Por ejemplo con la instrucción .style.color = “#000000”; hemos modificado el color de los textos de los <label> del formulario.

Por otro lado comprobaremos si los datos introducidos en los diferentes <input> son números o cadenas de texto gracias a dos métodos: .parseInt() e .isNaN(). El primero nos permitirá transformar el valor de un <input> en un valor numérico. Y el segundo nos permitirá verificar si el valor que hemos transformado en número es realmente un número o un string. En el caso de que sea un string el método .isNaN devolverá el valor true.

Según las variables y los métodos que hemos visto hasta ahora podemos llevar a cabo la validación del campo nombre:

validación del campo nombre del formulario

La validación del campo edad será muy similar a la del campo precendente, pero no será exactamente igual. Comprobaremos que dicho campo no contiente únicamente espacios en blanco, que los datos introducidos son realmente un número, y que dicha cifra se encuentre entre los valores 0 y 120:

validación del campo edad del formulario

En cuanto al código de validación del campo teléfono este será más corto gracias a la utilización de la expresion regular regEx telephone. En la variable var regEx_telephone está almacenada una expresión regular que nos permitirá validar una cadena de números que corresponda con el patrón de los números de teléfono internacionales. Esto quiere decir que la persona que rellenará el formulario deberá introducir un número de teléfono precedido del correspondiente prefijo internacional, dependiendo del país donde habite. Gracias al ejemplo que se muestra mediante el atributo placeholder del <input> #telepone_field el usuario dispondrá de la información necesaria para introducir su número de teléfono de forma correcta.

validación del campo teléfono, según el formato de teléfonos internacional

Gracias al código que estamos definiendo en el archivo validation_javascript.js también vamos a llevar a cabo unas sencillas restricciones de teclado, permitiendo escribir solamente numéros o letras según nos convenga en cada uno de los posibles <input> del formulario. Por lo tanto, para acotar los datos que podrán ser introducidos en el campo nombre vamos a crear una función, fuera de la función validate_form(), que se llamará restrict_characters(event). A dicha función le pasaremos como parámetro el objeto event, gracias al cual podremos capturar el charCode de cada una de las teclas pulsadas por el usuario. La función restrict_characters(event) devolverá siempre el valor true, como la función validate_form(), a no ser que se cumpla alguna de las restricciones que contiene su código, en tal caso la función devolverá el valor false evitando que el carácter de la tecla pulsada se escriba.

Si pensamos en como llevar acabo la restricción de teclado nos daremos cuenta que tendremos que indicar de alguna forma cuales son las teclas o los caracteres que podrán ser utilizados dentro del campo nombre de nuestro formulario. Para ello podemos almacenar todas las letras o números que sean necesarios dentro de una variable string. En este ejemplo vamos a llamar a dicha variable var letters ya que solo contendrá letras. También podremos guardar los códigos de las teclas especiales que queremos dejar activas dentro de otra variable de tipo array. Este array se va a llamar var special_keys. Dichos caracteres especiales serán, por ejemplo, la tecla backspace, la tecla delete o las flechas left y right arrow.

Primero recorreremos el array de los caracteres especiales var special_keys utilizando un for, como es lo habitual para recorrer los valores de un array. Dentro de ese for podemos utilizar otras estructuras de control de flujo, en nuestro caso implementaremos un if para comprobar si el código de la tecla pulsada, que se guarda en la variable var key, coincide con alguno de los códigos almacenados en el array var special_keys. Si el resultado de este if es positivo modificaremos el valor de la variable booleana var flag_special_key adjudicandole el valor true.

Después, fuera del for que hemos utilizado para recorrer el array special_keys, vamos a utilizar un if para verificar si la tecla pulsada por el usuario coincide con alguna de las letras guardadas en el string var letters. Para ello utilizaremos el método .indexOf() que devolverá un valor booleano, el cual nos permitirá entrar o no en el if. Un segundo parámetro de ese mismo if verificará si la variable flag_special_key guarda el valor true o false. Si las dos condiciones del if se cumplen la función restrict_characters(event) devolverá el valor false, y la tecla pulsada no se escribirá.

función de restricción de caracteres que usaremos en el campo nombre para evitar la introducción de datos númericos

Para concluir la función restrict_characters(event) también vamos a limitar el número de caracteres que podrá emplear el usuario dentro del campo nombre. Para lo cual vamos a utilizar dos variables: la var max_char que guardará el valor máximo de caracteres que permitiremos escribir, y la var name_value que guardará la cantidad de caracteres que ya están introducidos en el campo nombre. El bucle while que utilizaremos después permitirá devolver el valor false en el caso de que la varible name_value sea mayor que la variable max_char.

Una vez terminada la función restrict_characters(event) vamos a continuar con el código de la función validate_form() que habiamos dejado incompleta. Es el momento de escribir el código de validación del radio button del formulario, que permitirá al usuario indicar su género. Para lo cual necesitaremos obtener un array donde se guardan todas las opciones del radio button, en este caso solamente habrá dos opciones posibles: hombre o mujer. Por lo tanto utilizaremos el selector getElementsByName("") para seleccionar todas las opciones del radio button, que en nuestro caso hemos almacenado en la variable var radio_gender, pudiendo utilizar después las propiedades .checked o .value de dicho array. Dichas propiedades nos permitirán saber si el usuario a escogido alguna opción y también recuperar el valor de dicha opción seleccionada.. Si la variable booleana var flag_radio mantiene su valor false inicial esto querrá decir que ninguno de los valores de radio button ha sido seleccionado, por lo tanto mostraremos el correspondiente alert indicando el error de validación y haremos que la función validate_form() devuleva el valor false para impedir el envio de los datos del formulario.

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

La última validación que llevará a cabo la función validate_form() será la del campo <select> que nos permitirá escoger un país de residencia. Para poder verificar este campo hemos definido, al comienzo de la función, la variable var select_country, y gracias a la propiedad .selectedIndex podremos averiguar si el índice de la opción del <select> que está seleccionada es diferente o igual a 0. La primera opción del <select>, que tiene el indice 0, estará marcada siempre por defecto, aunque el usuario no realice ninguna acción en este campo del formulario. Por lo que si la propiedad .selectedIndex guarda el valor 0 esto indicará que no se ha escogido ningún país de la lista desplegable. Normalmente usaremos esta primera opción del campo <select> para mostrar un simple mensaje dirigido al usuario, en este caso será una pequeña indicación que invita a elegir un país de la lista: ”Elija un país". Si el índice del campo país de residencia guarda el valor 0 entonces mostraremos un alert con un mensaje de error y haremos que la función vaidate_form() devuelva el valor false.

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

Por último, una vez que las funciones validate_form() y restrict_characters() están concluidas, solo faltará vincularlas con los elementos del documento html donde actuarán y con los eventos que las desencadenarán. Este es uno de los puntos más importantes del código, ya que permitirá que las funciones que hemos escrito realicen su trabajo. Siempre vincularemos las diferentes funciones a los correspondientes eventos una vez que la página haya cargado y los elementos del DOM estén disponibles, para lo cual utilizaremos la instrucción window.onload = function() {...};

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

A partir de está explicación no debería resultar complicado escribir nuestro propio archivo javaScript con la validación para un pequeño formulario como el propuesto. Dentro de los ejercicios propuestos en este mismo sito podrás encontrar otro formulario más amplio que este, el cual también ha sido validado utilizando javaScript y jQuery. Como conclusión quiero destacar que en programación siempre hay muchas alternativas posibles para obtener un mismo resultado, por lo que todos los desarrollos que propongo solo son eso, una proposición más dentro de un amplio abanico de posibilidades.