Validación de un formulario de inscripción en javaScript

Por favor rellena el siguiente formulario para recibir nuestras publicaciones. Los campos en negrita son obligatorios.










Logotipo Your Graphic Partner

Validación de un formulario completo en javaScript:

Este ejercicio pretende realizar la validación de gran parte de los diferentes campos que podemos encontrarnos dentro de cualquier formulario. Vamos a validar varios <input> de tipo texto y de tipo numérico, los cuales podrán tener un formato definido, es decir, podrán ser un número de teléfono, un correo electrónico, un documento de identidad o una fecha. Lo que nos obligará a utilizar una serie de expresiones regulares que nos ayudarán a verificar que los datos introducidos en dichos campos corresponden a los formatos apropiados. El ejercicio también incluye la validación de un campo <select>, de un <input> de tipo checkbox y de otro <input> de tipo radio button.

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

Una vez que el usuario pulse el botón de enviar es cuando se llevará a cabo la verificación de los datos introducidos. En el caso que se detecte algún error se mostrará un texto coloreado en rojo al comienzo del formulario que indicará cual es el fallo a corregir, y también se mostrará en rojo el <label> correspondiente al campo donde se ha cometido el error.

Claves de la validación con javaScript:

El archivo javascript_validation.js que vamos a usar contendrá dos funciones, una que realizará la validación de los datos introducidos por el usuario en cada uno de los campos del formulario, y otra que limitará el tipo y el número de caracteres que podrán ser utilizados dentro de los campos nombre y apellido.

La primera función se llamará validate_form(), y aunque su código es realmente extenso el único objetivo que persigue es el de verificar los datos introducidos y de aportar las notificaciones necesarias, en caso de error, para guiar al usuario en la correcta introducción de dichos datos.

La función comienza con la declaración de la mayor parte de las variables que se usarán a lo largo su código. De esta manera los principales elementos del documento html que van a ser utilizados a lo largo de la función quedarán disponibles desde el primer momento. También guardaremos en diferentes variables las expresiones regulares que utilizaremos en la función validate_form().

variables de la función validate_form()

Después de declarar e inicializar todas estas variables vamos a definir una función que se llamará reset_warnings() que tendrá como objetivo eliminar los mensajes de error que se hayan podido mostrar en validaciones anteriores. También se encargará de colorear en negro todos los <label> de todos los campos del formulario donde se haya podido cometer un error previamente. A continuación de declarar dicha función la ejecutaremos para asegurarnos que al comienzo de la siguiente validación todos los mensajes de error hayan desaparecido. De esta manera evitaremos que se acumulen las notificaciones de errores pasados con las posibles nuevas notificaciones que se puedan generar a partir de la nueva validación.

código de la función reset_warnings()

Una vez que hemos declarado las variables globales de la función validate_form() y que hemos declarado y ejecutado la función disordered_validation() podemos empezar con la validación de los diferentes campos del formulario. Empezaremos con la verificación de los datos del campo nombre, cuyo código de validación será prácticamente el mismo que para el campo apellido (aunque evidentemente las variables que se utilizarán serán diferentes). Se trata de comprobar si el campo nombre ha quedado vacío, si los datos introducidos están precedidos por espacios en blanco, o si dicho campo contiene únicamente espacios en blanco. La validación comenzará una vez que hemos pulsado el botón de enviar del formulario, y el código es el siguiente:

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

La validación de los diferentes <input> siempre tendrá un código similar a la del campo nombre. No obstante dicho código puede verse ampliado en ciertas ocasiones debido a las características concretas de los datos que espera recibir cada uno de los campos, o también si nos interesa adaptar los mensajes de error a cada uno de los posibles errores. Es el caso del campo que va a recibir el número de teléfono, ya que debemos comprobar que el campo no esté vacío o contenga únicamente espacios en blanco, que el usuario haya introducido números y no letras, y que el número de teléfono introducido corresponda con el formato de teléfono internacional. Es precisamente ese tipo de formato internacional el que nos interesa recibir en esta ocasión y que es el que va a imponer la expresión regular regEx_international_telephone.

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

Los métodos que estamos utilizando hasta el momento son:

- .test() que es el método que permite verificar si se cumplen las características establecidas por una expresión regular o no, devolviendo el valor true o false.

- .createElement() que nos permite crear un elemento html cualquiera dentro de un documento html, en este caso dentro del documento donde se encuentra el formulario.

- .createTextNode() mediante el cual podemos crear nodos de textos dentro de un documento html.

- .appendChild() que sirve para reubicar elementos de un documento html como elementos hijos de otros elementos del mismo documento html.

- .setAttribute() que permite crear o modificar atributos de un elemento html, como por ejemplo los atributos class, name, href, src, etc.

- isNaN() que examinará la variable o la expresión que le pasemos como parámetro y verificará si se trata de un número o no. Devolviendo el valor true si no se trata de un número o false si efectivamente se trata de un número.

- .focus() que nos permitirá fijar el foco en el campo del formulario que nos interese.

- .scrollTo() el cual desplazará el contenido que vemos a través de la ventana del navegador hasta las coordinadas de la página que le pasemos como parámetro.

Y las propiedades utilizadas son:

- .length que es la propiedad que guarda la longitud de una variable, ya sea un string o un array.

- .style la cual emplearemos para crear o modificar los estilos css de un elemento html.

En cuanto a la validación de los otros tipos de campos del formulario que son ligeramente diferentes vamos a comenzar con el <select> que nos permitirá seleccionar como país de residencia uno de los países propuestos de una lista desplegable. Para saber si el usuario a escogido realmente un país de residencia tendremos que verificar si alguna de las opciones de la lista ha sido marcada, para lo cual utilizaremos la propiedad .selectedIndex. Si dicha propiedad guarda el valor 0 significa que la primera opción del <select>, que es la que está siempre seleccionada por defecto, no ha sido modificada. Dicha primera opción del <select> no guarda más que un mensaje invitando al usuario a escoger uno de los países de la lista desplegable. Una vez que el usuario elija un país de la lista, la propiedad .selectedIndex cambiará y guardará el número de índice del país seleccionado.

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

Para la validación del radio button tendremos que almacenar en una variable, que de hecho será un array, las diferentes opciones del radio button. Gracias al atributo name, que tendrá que guardar el mismo valor en cada uno de los <input> del radio button, podremos seleccionar todas las opciones utilizando el selector .getElementsByName(). El array que guardará todas estas opciones ha sido definido al comienzo de la función de validación y lo hemos llamado var gender.

Vamos a proseguir recorriendo el array gender mediante un for, y dentro de dicho for implementaremos un if para comprobar mediante el metodo .checked si alguna de las opciones del radio button ha sido marcada por el usuario. En caso de que sea así le adjudicaremos el valor true a la variable booleana gender_flag. Después, fuera de ese for vamos a implementar un if cuya condición de entrada será precisamente el valor booleano guardado en la variable gender_flag. Si dicho valor es false esto quiere decir que ninguno de los dos géneros del radio button ha sido seleccionado, entonces el navegador entrará dentro del if donde hemos definido el mismo código que en ocasiones anteriores, el cual mostrará un mensaje de error en la cabecera del formulario y hará 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

En cuanto a la validación del checkbox podemos decir que es similar a la del radio button ya que guardaremos todas las diferentes opciones que ofrece dentro de un array que hemos llamado var subscription. La selección de todas las opciones del checkbox la haremos también mediante el selector .getElementsByName(). Recorreremos dicho array mediante un for, y dentro de ese for situaremos un if que tendrá como condición de entrada que alguna de las casillas del checkbox esté marcada. Si es así adjudicaremos a la variable booleana subscription_flag el valor true. También podemos aprovechar dicho if para recuperar los valores de las casillas marcadas por el usuario, tal y com indica el código que está comentado, creando un nuevo array y almacenando en el todos los valores que ha seleccionados mediante la propiedad .value.

Fuera de ese for utilizaremos un if, como hemos hecho en el caso del radio button, el cual tendrá como condición de entrada que la variable booleana subscription_flag no guarde el valor true. Una vez dentro del if volveremos a mostrar el mensaje de error en la cabecera del formulario y haremos que la función validate_form() devuelva el valor false para que el envío del formulario quede anulado hasta que no se solucionen los errores oportunos.

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

Por último solo nos queda por hacer dos cosas: Primero vamos a echarle un vistazo a la segunda función que contiene el archivo de validación javascript_validation.js. Esta función es mucho más sencilla que la función de validación. Su objetivo es el de limitar a 20 el número máximo de caracteres que podrán ser introducidos en los campos nombre y apellido del formulario, además de imponer una restricción de teclado en dichos campos, permitiendo únicamente que sean utilizados caracteres de tipo no numérico y algunas teclas especiales que seleccionaremos. Esta función se llama restrict_characters(event) y no nos vamos a detener mucho en ella porque su funcionamiento ya ha sido descrito en el ejercicio de "validación de un pequeño formulario" que está disponible, junto a otros ejercicios de programación en javaScript, dentro de este mismo sitio web. El código de dicha función es el siguiente:

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

La segunda y última cosa que nos quedará por hacer será vincular las funciones del nuestro archivo .js a los correspondientes elementos del formulario y a los eventos que las van a desencadenar. Como siempre esperaremos a que todos los elementos del DOM estén disponibles mediante la instrucción window.onload para poder establecer dichas relaciones correctamente:

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