Capítulo 1
Validaciones de datos en páginas web
A la hora de desarrollar páginas web, uno de los aspectos más importantes a tener en cuenta es la validación de datos.
La validación de datos abarca tanto la verificación como el control y la filtración de todas las entradas de datos que recibe el sistema desde el exterior.
En cuanto a seguridad informática se refiere, estas comprobaciones son vitales en sistemas conectados a Internet para detectar la vulnerabilidad de los sitios web frente a ataques externos.
En la creación de formularios, la validación también juega un papel muy importante, ya que sus entradas deben validarse. Esta validación es recomendable hacerla tanto del lado del cliente (con JavaScript por ejemplo) como del lado del servidor. La validación del lado del cliente permite notificar de forma instantánea al usuario cualquier error al completar el formulario, no necesitando respuesta por parte del servidor, lo que ayuda a disminuir la carga de procesamiento de este. Por su parte, la validación en el servidor será necesaria para asegurar la integridad y fiabilidad de los datos introducidos por el usuario, ya que, por ejemplo, JavaScript puede estar deshabilitado por defecto.
Si se dispone de una página web donde el usuario debe introducir datos, es conveniente validar la entrada de dichos datos. Esta validación sirve, en primer lugar, para verificar que el usuario ha introducido correctamente los valores de los controles solicitados, bloqueando el procesamiento de una página hasta que todos los campos sean válidos. En segundo lugar, sirve para evitar técnicas de suplantación de identidad o spoofing.
Definición
Spoofing
Consiste en la suplantación de identidad de una máquina de la red, mediante el uso de código malintencionado, con el fin de obtener recursos de un tercer sistema que guarda una relación de confianza, generalmente, mediante el nombre o la dirección IP del host suplantado.
La máquina atacante accede a la atacada suplantando la identidad de una tercera máquina que tiene establecida una cierta relación con la atacada, evitando que la suplantada interfiera en el ataque.
La validación de datos puede realizarse del lado del cliente (usuario) o del lado del servidor.
Actividades
1. Investigue sobre el modelo cliente-servidor y realice un esquema explicativo.
La validación del lado del cliente tiene como principales características las siguientes:
La validación del lado del servidor se realiza en el servidor como su nombre indica. Sus principales características son:
Definición
Cliente
Es el que inicia un requerimiento de servicio a través de redes LAN o WAN. En definitiva, un consumidor de servicios.
Servidor
Es cualquier recurso de cómputo dedicado a responder a los requerimientos del cliente. En otras palabras, un proveedor de servicios.
Es necesario hacer una validación de las funcionalidades y aplicaciones que ofrece una página web, ya se trate de formularios, consultas o modificaciones de registros en la base de datos.
Entre las más importantes, se encuentran:
Sabía que...
El término “usabilidad” es de gran importancia en la validación de datos en sitios web ya que mide el grado de facilidad en el uso de su interfaz.
Por ejemplo: los mensajes de error deben usar un lenguaje de fácil comprensión para el usuario. Además, los campos de carácter obligatorio deben distinguirse del resto.
Según el tipo de dato a comprobar, se usará una técnica de validación u otra. Los tipos de datos pueden ser:
La validación de datos es un proceso necesario para asegurar que los datos manipulados son los requeridos. No es suficiente con que el tipo de dato sea el especificado, también deberá ser válido. Así, por ejemplo, el 29 de noviembre de 1845 es una fecha válida, pero no de alguien que esté registrándose en una web.
Por otro lado, hay que tener en cuenta que las aplicaciones web pueden recibir ataques malintencionados. Estos pueden consistir en la introducción de datos sin sentido o falsos para comprobar el nivel de la validación de datos o incluso en la inserción de código malicioso.
Ejemplo
Se tiene la siguiente dirección web: paginaweb.php?id=7.
Debe validarse el código de la página, verificando que se trata de un número entero (id = 7). Si no se hiciera esta comprobación, se deja la puerta abierta a que algún atacante pueda cambiar este número por un código malicioso, pudiendo incluso llegar a eliminar la base de datos del servidor.
La implementación de las funciones de validación consistirá en traducir a un lenguaje de programación la funcionalidad que se quiere conseguir con ellas. Por tanto, la implementación dependerá de si la validación se realiza del lado del cliente o del lado del servidor, ya que el lenguaje de programación utilizado será diferente. En el lado del cliente, se realizará una programación con JavaScript, por ejemplo, y en el servidor con PHP.
Antes de implementar las funciones de validación, se debe tener claro el propósito de cada una de ellas. Hay que definir, por tanto, las restricciones que estas funciones abarcarán. Hecho esto, lo siguiente será traducir todo al lenguaje de programación deseado.
En el siguiente apartado de este capítulo, se repasarán las validaciones alfabéticas, numéricas y de fecha. Por tanto, a continuación se describirá el resto de las validaciones más habituales.
Una vez descritas, el siguiente paso será implementar su código. Por último, se procederá a la ejecución de estas funciones de validación.
Cabe destacar la utilidad de las expresiones regulares, ya que facilitarán enormemente las labores de validación. Son un grupo de caracteres que, siguiendo una serie de reglas, forman un patrón a partir del cual se pueden realizar comparaciones con otras cadenas de caracteres.
A continuación, se muestra una tabla con los caracteres utilizados en la creación de expresiones regulares.
| Carácter | Descripción |
| ^ | Principio de entrada o línea. |
| $ | Fin de entrada o línea. |
| * | El carácter anterior, 0 o más veces. |
| + | El carácter anterior, 1 o más veces. |
| ? | El carácter anterior, una vez como máximo. |
| . | Cualquier carácter individual, salvo el de salto de línea. |
| a|b | “a” o “b”. |
| {n} | “n” apariciones del carácter anterior. |
| {n,m} | Mínimo “n” y máximo “m” apariciones del carácter anterior. |
| [abc] | Cualquiera de los caracteres entre corchetes. Para especificar un rango, es decir, de la “a” a la “z” se utilizará un guión: [a-z]. |
| [^abc] | Cualquier carácter que no esté entre corchetes. |
| \b | Límite de palabra. Por ejemplo un espacio. |
| \B | Cualquiera que no sea un límite de palabra. |
| \d | Cualquier dígito. Equivale al rango del 0 al 9: [0-9]. |
| \D | Cualquier carácter que no sea un dígito. Equivale a [^0-9]. |
| \f | Salto de página. |
| \n | Salto de línea. |
| \r | Retorno de carro. |
| \s | Cualquier carácter individual de espacio en blanco (espacios, tabulaciones, saltos de línea, etc.). |
| \S | Cualquier carácter individual que no sea un espacio en blanco. |
| \t | Tabulación. |
| \w | Cualquier carácter alfanumérico, incluido el subrayado. Equivale a [A-Za-z0-9_]. |
| \W | Cualquier carácter que no sea alfanumérico. Equivale a [^A-Za-z0-9_]. |
Ejemplo
La expresión regular para un Documento Nacional de Identidad con el formato 12345678-LETRA será: (\d{8})([-]?)([A-Z]{1}). Con ello, se piden ocho dígitos consecutivos seguidos del guión y la letra correspondiente.
Explicadas las expresiones regulares, ya se pueden afrontar con garantías las diferentes validaciones.
Validación de campos de texto obligatorios
El usuario está obligado a introducir un valor en aquellos campos de texto que no puedan quedar vacíos. Por tanto, habrá que comprobar:
Validación de listas desplegables (tipo select)
Para este tipo de campos, interesa conocer el índice de la opción seleccionada. Si el campo se declara como obligatorio, el índice debe ser distinto de 0, ya que la opción que tiene asignado este índice suele ser una opción informativa por defecto y por tanto no válida.
Ejemplo
Como norma general, se asigna valor 0 a opciones como:
- Seleccione una categoría -.
Validación de una dirección de correo electrónico
Debe comprobarse que la dirección de e-mail introducida por el usuario sea válida, es decir, que su formato sea válido.
Sabía que...
Una dirección de correo electrónico está formada por un nombre de usuario, la arroba (@), el servidor y el dominio.
La @ divide en dos partes la dirección. A la izquierda queda el nombre de usuario, el cual depende de la elección de este. Pueden ser números, letras, una combinación de ellos, etc. Por su parte, a la derecha queda el nombre del proveedor del correo y no puede ser modificado por el usuario.
Una dirección de correo electrónico válida puede ser: juanpedro@gmail.com.
Validación de elementos de tipo checkbox
En los campos de tipo checkbox pueden darse diferentes posibilidades:
Por tanto, habrá que recorrer uno a uno todos los elementos de este tipo y comprobar si están marcados o no.
Actividades
2. ¿Cómo haría el recorrido por todos los elementos del tipo checkbox para comprobar si han sido o no marcados?
Validación de elementos de tipo radiobutton
Hay que tener en cuenta que no podrá seleccionarse más de un elemento de este tipo por grupo. Entonces, o el usuario no selecciona ningún elemento del grupo o selecciona uno como máximo.
Para comprobar si se ha seleccionado un elemento del grupo, hay que recorrer todos los elementos que lo componen uno a uno. Cuando se haya encontrado el elemento marcado (en caso de que se haya marcado alguno), finalizará la búsqueda.
Ejemplo
Un grupo muy común de elementos de tipo radiobutton es el referente al sexo. Este grupo, por norma general, está formado por dos elementos: Hombre y Mujer.
Validación de captcha
Será necesario comprobar que la cadena insertada coincide con la cadena solicitada. Esta puede estar formada por caracteres alfabéticos, numéricos o alfanuméricos.
Los captcha siempre tendrán carácter obligatorio dada su función, que no es otra que evitar los ataques malintencionados, aumentar la seguridad.
Las comprobaciones a realizar serán las siguientes:
Ejemplo
Imagine que la cadena abcdefg es la propuesta por un captcha. Si el usuario introduce la cadena gfedcba, se mostrará un mensaje de error, pues, aunque los caracteres son los mismos, el orden de estos varía.
Aplicación práctica
Manuel se encuentra desarrollando su primera página web. Esta consta de una sección de contacto, en la que se incluirá un formulario a rellenar por los usuarios que deseen realizar una consulta.
A la hora de implementar el formulario se le presenta una duda: quiere insertar un apartado aficiones pero no tiene claro si es más apropiado para este tipo de cuestiones emplear un campo de tipo select, de tipo checkbox o de tipo radiobutton.
¿Cuál será el más apropiado en este caso?
SOLUCIÓN
Dado que un usuario puede tener más de una afición, lo más recomendable es usar elementos de tipo checkbox ya que permiten seleccionar varios elementos del grupo. Por el contrario, las listas desplegables (select) y los radiobutton, solo permiten marcar un elemento del grupo.
A continuación, se hace un repaso al resto de validaciones no señaladas en el apartado anterior.
Validación de campos alfabéticos
Hay que comprobar que un determinado campo contiene letras únicamente y no otro tipo de caracteres o combinación de ellos.
Se pueden añadir otro tipo de controles alternativos y de utilidad, como por ejemplo:
Validación de campos numéricos
En este caso, el campo debe contener números solamente y no otro tipo de caracteres o combinación de ellos.
Como en los campos alfabéticos, se pueden añadir otra serie de controles dependiendo de las características de la aplicación, del servicio o de la información que se quiera recoger.
Actividades
3. Indique el nombre de alguna función, en JavaScript por ejemplo, que permita evaluar si el dato facilitado es un número. Explique su funcionamiento.
Validación de números de teléfono
Existen multitud de representaciones en relación a los números de teléfono. Estos pueden indicarse agrupados de tres en tres y separados con guiones (XXX-XXX-XXX), con prefijo internacional (+XX XXX-XXX-XXX), etc. Por tanto, el criterio de validación a seguir por el programador dependerá del formato requerido.
Actividades
4. Defina una expresión regular que dé como correcto un número de teléfono con el siguiente formato: (XXX XX-XX-XX).
Validación de un Documento Nacional de Identidad (DNI)
Se debe comprobar que el DNI proporcionado por el usuario sea válido, es decir, que esté formado por ocho cifras seguidas y una letra (XXXXXXXXLETRA), la cual debe ser correcta para el número introducido.
Nota
El programador no debe olvidar que los requisitos del Documento Nacional de Identidad varían de unos países a otros.
Validación de fechas
Lo primero será definir el formato de fecha. Como normal general, este será día, mes y año (dd/mm/aaaa).
Para que una fecha sea válida, el usuario tendrá que proporcionar un día, un mes y un año correctos, es decir, no se podrá introducir una fecha tal como el 30 de febrero de 1885.
Aplicación práctica
Una determinada empresa de informática dispone de una tienda online. En esta, para poder comprar, el usuario debe rellenar un formulario. El gerente de dicha empresa se dirige a usted porque quiere realizar un pequeño cambio en el campo del formulario destinado al número de teléfono. Actualmente, el formato del campo es el habitual, es decir, las nueve cifras consecutivas y sin espacios (XXXXXXXXX), y se quiere cambiar al siguiente formato: nueve cifras, las tres primeras separadas por un espacio y las siguientes agrupadas de dos en dos (XXX XX XX XX).
Implemente el código JavaScript necesario para que la validación en el formato que se le solicita sea correcta.
SOLUCIÓN
En primer lugar, se almacena el número de teléfono introducido por el usuario en el campo “telefono”. Seguidamente, ayudándose de la expresión regular /^\d{3}\s\d{2}\s\ d{2}\s\d{2}$/, se comprueba que el número de teléfono tenga el formato requerido. En caso de no ser así, la función devolvería valor false y no se enviaría el formulario.
El primer paso antes de implementar el código correspondiente a cada una de las validaciones a realizar será precisamente definir qué validaciones se van a llevar a cabo. Hecho esto, lo siguiente será desarrollar cada una de esas funciones.
A la hora de definir una función, hay que tener en cuenta que está formada por tres partes: el tipo, el nombre y los parámetros que recibe (en su caso):
Ejemplo
Una definición de una función que devuelve la suma de dos números enteros puede ser:
En la siguiente tabla, se definen las validaciones a desarrollar.
| Definición de las funciones | Descripción |
| boolean validarCampoObligatorio() | Comprueba si un campo de carácter obligatorio ha sido completado o no. Devuelve true si ha sido completado y false en caso contrario. |
| boolean validarCampoTexto() | Comprueba si se ha introducido texto solamente. Además, se controlará que la cadena de texto tenga una longitud determinada. En caso de no cumplirse estas restricciones, devolverá false. |
| boolean validarDni() | Comprueba si se introduce un DNI válido, teniendo en cuenta el formato de DNI español. Si el DNI no es válido, devolverá false. |
| boolean validarFecha() | Comprueba si la fecha facilitada es correcta en cuanto al formato. Además, se controlará que sea una fecha válida (real). Si no se cumplen ambas condiciones, la función devolverá false. |
| boolean validarTelefono() | Comprueba si se ha introducido una cadena numérica exclusivamente y formada por nueve cifras consecutivas. De no ser así, devolverá false. |
| boolean validarEmail() | Comprueba que la dirección de correo electrónico sea correcta. Si no lo es, devolverá false. |
| boolean validarSelect() | Comprueba si se ha seleccionado una opción de la lista desplegable. En caso de seleccionarse una opción, se obtiene el valor de esta. Devuelve false si no se selecciona opción alguna. |
| boolean validarCheckbox() | Comprueba si se ha seleccionado alguna opción del grupo. En caso de seleccionarse alguna o varias opciones, se obtiene el valor de estas. Devuelve false si no se selecciona opción alguna. |
| boolean validarRadiobutton() | Comprueba si se ha seleccionado una opción del grupo. En caso de seleccionarse una opción, se obtiene el valor de esta. Devuelve false si no se selecciona ninguna opción. |
A continuación, se expone el contenido o cuerpo de las funciones de validación definidas en el apartado anterior y se añade una breve descripción de su propósito. Más adelante, se detalla el funcionamiento de estas funciones.
Su finalidad será la misma independientemente del lenguaje de programación utilizado en su desarrollo. En este caso, se implementarán con JavaScript.
Función validarCampoObligatorio()
El objetivo de esta función será controlar que un campo determinado no quede vacío.
Esta condición asegura que el valor introducido en un determinado campo tiene una longitud de al menos un carácter (no puede ser cero), por lo que es imposible que ese campo quede vacío.
Actividades
5. Si a la condición anterior se le añade "if(dato == null)", ¿qué se pretende controlar?
6. ¿Y si además se añade "if(/^\s+$/.test(dato))"?
Función validarCampoTexto()
Esta función impide al usuario introducir en un determinado campo caracteres no alfabéticos.
Se controla que en los campos de texto no puedan introducirse caracteres distintos a las letras del abecedario.
Función validarDni()
Se pretende controlar que el usuario no pueda introducir un DNI incorrecto, ya sea por formato o porque la letra asociada al número facilitado no es válida.
En el campo destinado al efecto, no podrá introducirse un DNI que no esté formado por ocho cifras consecutivas seguidas de su letra correspondiente.
Función validarFecha()
El objetivo de esta función es controlar que el usuario introduce una fecha válida. Además, se debe respetar el formato día, mes y año (dd/mm/aa).
Actividades
7. La función anterior está incompleta, pues se debe controlar aún la validez del día, mes y año introducidos para evitar la introducción de fechas irreales. Por tanto, complete las condiciones que faltan para controlar esto.
Función validarTelefono()
Esta función fuerza al usuario a introducir en el campo destinado al efecto nueve caracteres numéricos exclusivamente.
Se considerará válido un número de teléfono cuando el usuario haya introducido nueve dígitos consecutivos y sin ningún tipo de separación entre ellos.
Función validarEmail()
Será de utilidad para campos destinados a recoger las direcciones de correo electrónico de los usuarios.
No se aceptará una dirección de correo electrónico incorrecta, es decir, la dirección de correo tendrá que tener el siguiente formato: nombreUsuario@servidor.dominio.
Actividades
8. Proponga una expresión regular alternativa que también cumpla con el formato de dirección de correo electrónico.
Función validarSelect()
Si se hace uso de listas desplegables, será necesario controlar que se ha seleccionado un elemento de la lista y además recoger qué elemento ha sido seleccionado.
Se comprueba que el índice de la opción seleccionada es válido y distinto de cero. La primera opción de la lista no es válida, por tanto, no se admite el valor cero.
Función validarCheckbox()
Usar elementos de este tipo permite a los usuarios seleccionar varias de las opciones que se proponen. Por tanto, habrá que identificar qué valores se han seleccionado para almacenar la información correspondiente.
Uno a uno, se recorren todos los elementos de tipo checkbox que forman parte del grupo, comprobando si están o no marcados. Los marcados se almacenan en un array. Si no se ha seleccionado ninguno, la función devuelve false.
Actividades
9. Implemente la función anterior empleando otro bucle, por ejemplo un bucle while.
Función validarRadiobutton()
Al igual que los elementos de tipo select o checkbox, este tipo de elementos es de utilidad a la hora de realizar encuestas, por ejemplo. Por tanto, para recoger la información solicitada, se debe conocer qué elemento del grupo ha sido seleccionado.
Con esta función, se conocerá si se ha seleccionado algún elemento radiobutton perteneciente a un grupo. Se comprueba elemento a elemento si ha sido o no seleccionado. En el momento en el que se encuentre un radiobutton marcado, finaliza el bucle. En caso de no haberse marcado ningún elemento radiobutton, la función devolvería false.
Aplicación práctica
Suponga que ha desarrollado una aplicación web y que esta dispone de un formulario de contacto.
Debe implementar el código JavaScript necesario para hacer que el campo “usuario” sea un campo de texto obligatorio. Además, debe tener en cuenta las siguientes restricciones:
SOLUCIÓN
Tras recoger el valor introducido en el campo “usuario”, se realizan las comprobaciones pertinentes.
En primer lugar, se controla que el valor del campo sea válido. Si el usuario introducido no contiene ningún valor de tipo numérico, cadena de texto, etc., el valor de la variable “nombre” es null (el valor introducido no es válido).
En segundo lugar, se controla que el campo no esté vacío. Si la variable “nombre” no tiene una longitud superior a cero caracteres, el campo está vacío.
Por último, se controla que el valor del campo no esté formado por espacios solamente. Para ello, se hace uso de las expresiones regulares.
Si cualquiera de estas restricciones no se cumpliera, la función devolverá valor false y el formulario no se enviará.
La ejecución del código es un paso muy importante a la hora de desarrollar aplicaciones puesto que se muestra el comportamiento del sistema paso a paso en cada una de las situaciones que se plantean. Si se detecta algún error, es el momento de solventarlo. Por ello, hay que probar todas y cada una de las funcionalidades de la aplicación.
Actividades
10. Investigue sobre las fases que forman parte del ciclo de vida del software.
11. Elabore un esquema sobre las fases a las que hace referencia la actividad anterior.
Más adelante, en el apartado correspondiente a la comprobación de los datos introducidos por el usuario en un formulario, se mostrará la ejecución del formulario que se propone seguidamente. En esa ejecución, se llevan a cabo las pruebas pertinentes en cuanto a validación de formularios se refiere.
Aplicación práctica
En la empresa en la que trabaja, deciden abordar un nuevo proyecto informático. Este consiste en el desarrollo de un sitio web.
Tras una reunión en la que le facilitan una serie de restricciones generales en cuanto al diseño y la funcionalidad del sistema, sin perder más tiempo, se pone manos a la obra.
¿Es correcta la forma de proceder? En caso de no serlo, ¿qué consecuencias tendría este método de trabajo?
SOLUCIÓN
Lo primero que debe hacerse es tener claro qué se busca. No basta con una idea general. Por tanto, deberían haberse definido los requisitos que se requieren, los objetivos que se pretenden conseguir, etc.
Una buena planificación evitará problemas futuros, modificaciones y errores inesperados, ahorrará tiempo y disminuirá los costes. Hecha la planificación, ya se puede afrontar con garantías el diseño y la implementación del sistema.
Cada vez es más frecuente el uso de formularios en una página web. Estos presentan multitud de utilidades, tales como: rellenar encuestas online, consultar y mostrar información, crear pedidos de ventas o de servicios, etc.
La información de un formulario hay que validarla antes de procesarla, es decir, asegurar que los datos enviados son los requeridos. La validación consistirá en comprobar que los datos han sido introducidos de forma correcta y completa, en definitiva, comprobar que los datos introducidos por el usuario cumplen las especificaciones marcadas por la aplicación.
Recuerde
La usabilidad se refiere a la facilidad de uso de la aplicación y debe utilizarse como un atributo de calidad del sistema.
El procedimiento de validación puede realizarse de varias formas. La más práctica muestra los errores sobre el propio formulario, lo que facilita su corrección.
Recuerde
El cliente es un consumidor de servicios, mientras que el servidor es el proveedor de esos servicios.
Cuando se completa un formulario, deben validarse sus entradas. Esta validación es recomendable hacerla tanto del lado del cliente como del lado del servidor.
La validación del lado del cliente ayuda a disminuir la carga de procesamiento del servidor, ya que si el usuario no ha rellenado el formulario correctamente o por completo, se le puede notificar de forma instantánea, es decir, no necesita esperar respuesta alguna por parte del servidor. Esta comprobación de los datos introducidos por el usuario puede realizarse mediante JavaScript.
Importante
Cabe señalar que la validación con JavaScript puede no ser suficiente por dos razones:
En consecuencia, será necesario validar además en el servidor con PHP, por ejemplo.
Del lado del servidor, se validará utilizando el lenguaje de programación con el que se esté desarrollando la aplicación web. Por ejemplo, si se está desarrollando el sitio con PHP, habrá que generar una función que lea y valide los datos que llegan a las variables del formulario. Tendría que comprobarse que la información contenida en las variables es la solicitada.
Por lo general, validar un formulario consiste en llamar a una función de validación en el momento en el que el usuario realiza el envío de los datos al pulsar sobre el botón Enviar.
Se pueden realizar multitud de comprobaciones. Las más habituales son:
Definición
URL
Acrónimo de Uniform Resource Locator, localizador de recursos. Permite localizar o acceder de forma sencilla a cualquier recurso de la red desde el navegador de la World Wide Web (sistema de distribución de documentos de hipertexto y accesibles vía Internet). El formato de una URL es: servicio://maquina.dominio:puerto/camino/fichero.
El siguiente diagrama de flujo muestra una visión global del procedimiento de validación.
La importancia de validar las entradas de un formulario radica en los siguientes aspectos fundamentalmente:
Los datos requeridos en un formulario dependerán de la finalidad de este, es decir, no serán precisos los mismos datos a la hora de hacer una entrevista online que a la hora de realizar el pedido de un producto, por ejemplo.
A continuación, se define un formulario de ejemplo bastante completo. Este consta de los siguientes campos a rellenar por el usuario:
El código HTML correspondiente al formulario propuesto será:
Actividades
12. Diseñe un formulario en HTML que contenga los siguientes campos: nombre, e-mail, mensaje y aficiones. Para este último campo, tenga en cuenta que el usuario puede tener más de una afición.
Además de los campos propios del formulario, se ha incluido la librería JQuery (línea 51), ya que se pueden utilizar varios recursos JavaScript del control del formulario, además esta librería es imprescindible para poder usar también el framework Bootstrap para poder dar estilo al formulario (línea 6, 54 y 55).
Actualmente, siguiendo las indicaciones de Google y la mayoría de los motores de búsqueda, para que la web se cargue en el menor tiempo posible, es necesario que los enlaces CSS sean cargados en el <head> del documento html, mientras que las librerías JavaScript se deberán cargar antes del cierre de la etiqueta <body>.
Desde la aparición de la versión 5 de HTML, ya no es necesario la validación vía código de los formularios al disponer las etiquetas del propio HTML recursos suficientes para impedir la entrada de datos incorrectos.
Recordemos que en HTML5, se disponen de distintas etiquetas de formulario que limitan el tipo de datos en el formulario:
Además, se disponen de atributos en las etiquetas para impedir ciertas acciones:
Definición
jQuery
Biblioteca más utilizada de JavaScript. Su cometido, principalmente, es simplificar las tareas de creación de páginas web responsivas (adaptadas al entorno del usuario).
Esta biblioteca ofrece grandes ventajas, entre las que destacan:
Una vez definido el formulario, lo siguiente será la implementación de las funciones que llevarán a cabo el proceso de validación de los datos facilitados por el usuario.
Aunque HTML5 ya proporciona herramientas para validar los datos introducidos en un formulario, a continuación se explica cómo se podrían validar de forma manual los datos de un formulario, tanto en el lado cliente como en el lado servidor.
Validación en el lado del cliente (JavaScript)
Como se ha apuntado anteriormente, validando desde el lado del cliente se consigue que, si el usuario, por ejemplo, comete algún error al completar un formulario, sea notificado de ello al instante sin tener que efectuar una recarga completa de la página con la consiguiente pérdida de los datos ya introducidos. En este caso, no sería preciso esperar respuesta por parte del servidor, por lo que se reduce su carga de procesamiento.
El proceso de validación comienza cuando el usuario pulsa el botón de envío del formulario. En ese momento, se llama a una función de validación para realizar las comprobaciones oportunas.
Para el formulario propuesto, se ha incluido además una validación individual y paso a paso, haciendo uso del evento onblur (onblur="validarCampoTexto()", por ejemplo), lo que facilita la corrección de los datos al usuario. Este evento permite comprobar la validez de un dato al retirar el foco (lugar donde está el cursor) del campo en el que se está, es decir, al cambiar de un campo a otro.
Nota
Además de onblur, existen multitud de eventos que podrían ser útiles a la hora de validar los campos del formulario. Por ejemplo: el evento onkeyup se podría utilizar para hacer una validación instantánea, ya que se activa al soltar una tecla.
Partiendo del formulario propuesto, el código JavaScript que llevará a cabo la validación será el siguiente:
Lo primero será definir, en la etiqueta form, el evento onsubmit como:
Este evento se comportará de una forma u otra en función del valor que
devuelva la función “validarFormulario()”. En caso de devolver valor true, el formulario se enviará, pues no se han encontrado errores. Si se detectaran errores en el formulario, el valor devuelto será false y el formulario no se enviará.
Nota
El nombre de las funciones no tiene por qué ser el propuesto. El programador puede nombrarlas de forma diferente, aunque se recomienda que sean nombres identificativos, nombres relacionados con su funcionalidad. Esto resulta de utilidad por ejemplo en el caso de que otra persona en el futuro desee reutilizar el código, ya que así el entendimiento de este será más asequible. Como ejemplo, imagínese que se está desarrollando un código cuya misión es la suma de dos números. Lo más lógico sería que esta se llamara “sumar()”.
En la función “validarFormulario()”, se realizarán las comprobaciones pertinentes. En el momento en que una sola de las comprobaciones no se cumpla, la función devolverá valor false y no se enviará el formulario. Si se cumplen todas las condiciones que comprueban la validez de los datos introducidos por el usuario, el valor devuelto por la función será true y se enviará el formulario.
El esquema de la función “validarFormulario()” puede ser:
El proceso que sigue la función de validación consiste en evaluar los campos del formulario uno a uno y comprobar que cumplen los requisitos especificados por la aplicación. En caso de no cumplirse alguna de las condiciones, la función devolverá valor false, se mostrará un mensaje de error y el formulario no será enviado. Si todos los campos cumplen los requisitos, la función devuelve valor true y se envía el formulario.
Conforme a esto, se propone la función de validación que realizará las llamadas pertinentes a las funciones encargadas de comprobar los requisitos que debe cumplir cada uno de los campos de los que se compone el formulario propuesto:
Nota
La notificación de los errores será diferente en función del diseño de la aplicación. Lo más recomendable es mostrar un mensaje de error al lado del campo correspondiente. Además, se puede mostrar un mensaje principal advirtiendo al usuario de que el formulario presenta errores.
El siguiente paso será implementar el código de cada una de las comprobaciones a realizar. Como se ha mencionado en apartados anteriores, se pueden realizar multitud de comprobaciones, tales como: que no haya campos obligatorios sin rellenar, que una dirección de e-mail presente un formato válido, que se ha seleccionado una opción de una lista, etc.
Aplicación práctica
En su primer día de trabajo, le piden mejorar el código referente a una función de validación de un formulario de contacto. Esta sigue el mismo esquema que la función “validarFormulario()” vista con anterioridad. En concreto, usted debe reducir las líneas de código empleadas en el desarrollo de esa función para hacer esta más eficiente si cabe.
Por tanto, implemente el esquema que seguiría su función de validación y explique su funcionamiento.
SOLUCIÓN
A partir de la función “validarFormulario()”, un esquema que ahorraría líneas de código podría ser:
En este caso, se evalúan todas las condiciones a la vez y, si cumplen los requisitos, la función devuelve valor true, por lo que el formulario se enviará. En caso contrario, la función devolverá valor false, se mostrará un mensaje de error y no se enviará el formulario.
Validación del campo de texto “nombre”
Las restricciones que se han definido para este campo son:
El código a implementar para controlar esto puede ser:
En primer lugar, se crea la variable “abecedario”, que contiene un string con todas las letras del abecedario, las vocales con tilde y el espacio en blanco para el caso de nombres compuestos. Tras recoger el contenido del campo “nombre”, se comprueba que este sea válido, que no esté vacío (debe tener una longitud superior a 0 caracteres) o que no esté formado por espacios solamente (haciendo uso de la expresión regular "/^\s+$/"). En caso de no cumplirse alguna de estas condiciones, la función devolverá valor false, mostrándose un mensaje de error ('Debe rellenar este campo.'). En consecuencia, el formulario no será enviado. Si todo lo anterior se cumple, lo siguiente será comprobar que el campo contiene solamente texto.
Actividades
13. Implemente una función que valide un campo de texto. Como restricciones, se proponen:
Para ello, se transforma en minúsculas (haciendo uso del método "toLowerCase()" ("nombre = nombre.toLowerCase();")) el valor recogido del campo “nombre” con el fin de comprobar que está formado únicamente por las letras incluidas en la variable “abecedario” (que están en minúscula), asegurando así que se trata de un campo de texto exclusivamente. Hecho esto, se recorre (usando un bucle “for”, por ejemplo) cada uno de los caracteres que componen la variable recogida y se comprueba si están presentes en la variable “abecedario”. En el caso de encontrarse un carácter no alfabético, la función devolverá false y se mostrará el mensaje de error pertinente 'Valor no válido. Solamente puede introducir texto.'), no enviándose el formulario. Por el contrario, si el usuario ha introducido únicamente letras, devolverá true y se mostrará el mensaje 'Campo rellenado correctamente.'.
Cabe apuntar que se ha hecho uso tanto de la biblioteca jQuery como de CSS para mostrar los mensajes de error (en color rojo) y confirmación (en color verde). De esta forma, se facilita la corrección de los campos introducidos de forma incorrecta.
Los métodos de JavaScript "removeClass(nombreClase)" ("$("#mensaje_nombre").removeClass("textoError");") y "addClass(nombreClase)" ("$("#mensaje_nombre").addClass("textoOK");") permiten anular y asignar respectivamente una clase a un elemento o conjunto de elementos HTML. En el ejemplo que aquí se trata, asignan el color verde o rojo al mensaje de información según corresponda.
Importante
El método "indexOf()" recoge la posición en la que se encuentra la primera aparición del carácter indicado dentro de una cadena de texto. Si en la cadena no está presente el carácter que se busca, la función devuelve un -1.
Por su parte, la función "charAt(posicion)" obtiene el carácter que se encuentra en la posición indicada.
El siguiente ejemplo permite tener una mejor visión de la funcionalidad de estos métodos. Suponga que se está trabajando con la cadena Antonio:
En el primer caso, la variable “posicion” toma valor 2, ya que el carácter ‘t’ está en esa posición. Recuérdese que se empieza a contar en 0. En el segundo caso, tomará valor -1, porque el carácter ‘z’ no aparece en la cadena “Antonio”.
Para la misma cadena:
En principio, la variable “caracter” recoge la letra A, ya que es la que ocupa la posición 0 en la cadena Antonio. Seguidamente, pasa a recoger la letra n, pues es la que ocupa la posición 4.
Validación del Documento Nacional de Identidad (DNI)
El usuario no podrá dejar vacío este campo, dado su carácter obligatorio. Dicho esto, el DNI solo se considerará válido cuando esté formado por ocho cifras consecutivas, seguidas de la letra correspondiente (XXXXXXXXLETRA). Las comprobaciones necesarias para ello se implementan en el siguiente código:
Como en el resto de campos del formulario, lo primero que debe hacerse es recoger el valor del campo, en este caso el “dni”. Este valor se almacena en la variable “dni”.
Se ha declarado un array “letrasDni”, que contiene las letras que pueden formar parte de un Documento Nacional de Identidad. Más adelante, se describe el procedimiento para obtener la letra correspondiente a un número de DNI.
Seguidamente, el DNI introducido por el usuario se transforma en mayúsculas mediante el método "toUpperCase()" ("dni = dni.toUpperCase();"), ya que la comparación de la letra de DNI introducida por el usuario se lleva a cabo con las letras del array “letrasDni” y estas están en mayúscula. El propósito final de esto es hacer válido un número de DNI acompañado por una letra mayúscula o minúscula indistintamente.
Dicho esto, la primera comprobación que se hace, al igual que en el caso anterior con el nombre de usuario, es que el DNI sea válido, que no esté vacío (debe tener una longitud superior a 0 caracteres) o que no esté formado por espacios solamente. En caso de no cumplirse alguna de estas condiciones, la función devolverá valor false, mostrándose un mensaje de error ('Debe rellenar este campo.'). En consecuencia, el formulario no será enviado. Si todo lo anterior se cumple, lo siguiente será comprobar que el campo tiene el formato requerido (ocho cifras consecutivas seguidas de la letra correspondiente).
Haciendo uso de las expresiones regulares, se consigue el formato deseado (XXXXXXXXLETRA). Si el DNI introducido por el usuario no guarda este formato, la función devolverá valor false, mostrándose el mensaje 'Formato de D.N.I. no válido. Recuerde: (XXXXXXXXLETRA).'. En este caso, no se enviará el formulario.
Recuerde
Las expresiones regulares son patrones que, usando una serie de reglas, definen la sintaxis de un texto para poder validarlo, manipularlo e incluso modificarlo.
Si el formato del DNI es el esperado, el siguiente paso será comprobar que la letra facilitada es la correcta. Esto se consigue dividiendo el número de DNI (sin letra) entre 23 y quedándose con el resto (dni.substring(0,8)%23). Ese resto indica la posición que ocupa la letra correspondiente a ese número de DNI en el array “letrasDNI”. Es importante señalar que la primera posición del array es la 0 (la letra M, por ejemplo, ocupa la posición 5).
Ejemplo
Supóngase que el número de Documento Nacional de Identidad de una persona es el 12345678. Para conocer la letra que corresponde a ese número, habrá que dividirlo entre 23, obteniendo el resto. Al realizar esta operación se comprueba que el resto es 14. Comprobando en el array de letras del DNI, se ve que la letra que ocupa la posición 14 es la Z. Por tanto, el DNI es: 12345678Z.
Hecho este apunte, solo resta mencionar que, en caso de introducir el usuario una letra errónea, la función devolverá valor false y se mostrará el mensaje: 'La letra del D.N.I. no es correcta.'. El formulario no se enviará.
Si esta última comprobación resulta satisfactoria, la función devuelve true y se muestra el siguiente mensaje: 'Campo rellenado correctamente.'.
Validación de la fecha de nacimiento
A diferencia de los campos anteriores, la fecha de nacimiento no tiene carácter obligatorio, por lo que el usuario no está obligado a rellenar este campo. Si no lo hiciera, la función devolverá valor true y el formulario será enviado. No obstante, en caso de que el usuario facilite este dato, hay que realizar varias comprobaciones, tales como que el formato de fecha sea el requerido (dd/mm/aaaa) o que el usuario no pueda introducir una fecha no válida, como por ejemplo el 31 de noviembre.
El código que permite realizar estas tareas de validación puede ser el siguiente:
Tras recoger el dato facilitado por el usuario en la variable “fecha”, se declaran otras seis variables: “longitudFecha” (almacena el número de caracteres que forman la fecha introducida por el usuario), “posBarraUno” (guarda la posición en la que se encuentra la barra que separa el día del mes, para lo cual se hace uso del método "indexOf()", al que se le pasa una subcadena, en este caso "/", y localiza la posición en la que aparece por primera vez la subcadena en la cadena “fecha”), “posBarraDos” (almacena la posición que ocupa la barra que separa el mes del año, haciendo uso del método "lastIndexOf( )" al cual se le pasa la subcadena a buscar, de nuevo "/", y localiza la última posición de esta en la cadena “fecha”). Estas tres primeras variables serán de utilidad para distinguir el día, el mes y el año, a fin de realizar las comprobaciones oportunas propias de una fecha, tales como: no se puede introducir un día menor de 0 ni mayor de 31, se deben controlar los años bisiestos para el número de días que tendrá el mes de febrero como máximo, etc. Las otras tres variables declaradas serán “dia”, “mes” y “anyo”. En la variable “dia”, se almacena la parte de la cadena “fecha” que abarca desde el primer carácter de esta hasta la barra (/) (cuya posición se conoce gracias al método "indexOf()") que separa el día del mes. Por su parte, la variable “mes” almacena la parte de la cadena que va desde el carácter siguiente a la barra que separa el día del mes (cuya posición se conoce gracias al método "lastIndexOf()"), hasta el carácter anterior a la barra que separa el mes del año. Por último, en la variable “anyo” se guardan los caracteres restantes a partir de la barra anteriormente citada. Esto se lleva a cabo haciendo uso del método "substring()", el cual permite obtener una porción de una cadena determinada.
Ejemplo
Supóngase que la fecha de nacimiento del usuario es el 29/11/1945. Si se quiere extraer el mes, lo primero será recoger esa fecha en una variable llamada “fecha”, por ejemplo. Hecho esto, se declara una variable para almacenar el mes, que puede llamarse “mes”. El código para realizar esto es:
Con esta expresión, se consigue que de la cadena 29/11/1945 contenida en la variable “fecha” se extraigan los caracteres que ocupan las posiciones 3 y 4 (el 11).
Una vez más, cabe destacar que la primera posición de la cadena será la 0 y así sucesivamente.
Una vez que se dispone del día, mes y año por separado, lo primero será convertir estas variables de tipo “string” a tipo “entero” para realizar las comprobaciones pertinentes. Para esto, se hace uso del método "parseInt()".
Hecho esto, se comprueba que el usuario ha introducido una fecha cuyo formato se corresponde al requerido (dd/mm/aaaa). Una vez más, las expresiones regulares facilitan esta tarea (/^\d{1,2}\/\ d{1,2}\/\d{2,4}$/). La fecha estará compuesta por un día, un mes y un año, separando cada uno de ellos mediante la barra (/). Para el día y el mes, se define que estos no estén formados por más de dos caracteres numéricos. En el caso del año, no podrán ser más de cuatro caracteres numéricos. Si este requisito no se cumple, la función devuelve false y se muestra el mensaje de error 'La fecha introducida no tiene un formato válido.'. Al no cumplirse las especificaciones requeridas, el formulario no se envía.
Si la fecha introducida por el usuario cumple el requisito del formato, lo siguiente será establecer una serie de restricciones para evitar que se introduzcan fechas imposibles, como por ejemplo el 30 de febrero.
Como ya se dispone del día, el mes y el año por separado y como números enteros, se realizan las siguientes comprobaciones:
Si alguno de esos requisitos no se cumple, la función devolverá valor false, no se enviará el formulario y el usuario será informado mediante el siguiente mensaje de error correspondiente mediante jQuery como para el resto de campos ($("#mensaje_fecha").html('El año introducido no es válido.');).
Sabía que...
jQuery es una biblioteca gratuita y fue creada por John Resig.
El formulario se enviará si el campo está vacío o si todas las especificaciones comentadas se cumplen.
Aplicación práctica
Suponga que está realizando un formulario de contacto y uno de los campos requeridos es la fecha de nacimiento del usuario. Tiene implementada toda la funcionalidad de esta y sus correspondientes restricciones, a excepción de la función que comprueba si el año introducido es o no bisiesto.
Por tanto, implemente una función que permita saber si un año es bisiesto. Para ello, debe saber que un año es bisiesto si es divisible entre 4, a menos que sea divisible entre 100. Sin embargo, si es divisible entre 100 y además divisible entre 400, también es bisiesto.
SOLUCIÓN
La implementación para calcular si un año es o no bisiesto sería:
Para saber si el año es divisible entre 4, 100 o 400, el resto resultante de la división de este entre esas cifras debe ser 0. Para conseguir el resto, se utiliza el símbolo “%”.
Si el año es bisiesto, la función devuelve true y, en caso de no serlo, devolverá false.
Validación del número de teléfono
Al igual que la fecha de nacimiento, el número de teléfono no tiene carácter obligatorio. Aún así, si el usuario facilita este dato, debe cumplir unas determinadas reglas:
El código propuesto es:
El valor introducido en el campo destinado al efecto se almacena en la variable “telefono”. Con la expresión regular "/^\d{9}$/" se comprueba si el dato está formado por nueve cifras consecutivas. En caso de no ser así, se muestra el mensaje de error 'El teléfono introducido no es válido. Recuerde su formato: (XXXXXXXXX).', informando de tal efecto al usuario. En consecuencia, la función devuelve valor false y no se envía el formulario.
Si este campo ha sido completado satisfactoriamente, se muestra el mensaje 'Campo rellenado correctamente.'.
Tanto en este último caso como en el caso de que el usuario haya decidido dejar vacío este campo, la función devuelve true y el formulario será enviado con éxito.
Validación del correo electrónico
El campo destinado a introducir la dirección de correo electrónico del usuario tampoco tiene carácter obligatorio, por lo que si el usuario deja vacío este campo, el formulario se enviará sin ningún tipo de problema.
No obstante, hay que definir una serie de restricciones que realicen las comprobaciones pertinentes en caso de que el usuario introduzca su dirección de correo electrónico. Para ello, se presenta el siguiente código:
Un e-mail será válido siempre que presente el formato comentado con anterioridad: nombreUsuario@servidor.dominio. Para comprobar si la dirección de correo facilitada por el usuario es válida, se hace uso de la expresión regular "/[\w-\.]{3,}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-] {2,4}/". Si no se introduce una dirección de e-mail válida, es decir, no presenta el formato indicado, la función devuelve valor false, se muestra el mensaje de error 'El email introducido no es válido. Recuerde su formato: (nombre + @ + servidor + dominio).' y, por consiguiente, el formulario no se enviará. En otro caso, devolverá valor true y se mostrará el mensaje 'Campo rellenado correctamente.'.
Recuerde
Validación del campo ocupación (tipo select)
Para finalizar con la validación del formulario de ejemplo desde el lado del cliente con JavaScript, hay que comprobar que el usuario ha marcado una de las ocupaciones incluidas en la lista desplegable (“Empleado”, “Desempleado” o “Estudiante”), ya que este campo está definido como obligatorio.
A continuación, se muestra un posible código para llevar a cabo este tipo de comprobaciones:
La propiedad “selectedIndex” permite comprobar que el índice de la opción seleccionada es válido y distinto de cero. La primera opción de la lista (“Elija una ocupación”) no es válida, por tanto, no se admite el valor cero. Si el usuario no selecciona una opción válida (distinta de 0), la función devolverá valor false, mostrándose el mensaje de error 'Debe seleccionar una ocupación.'. En este caso, el formulario no será enviado.
La función devolverá true si el usuario ha seleccionado una ocupación, mostrándose el siguiente mensaje: 'Campo seleccionado correctamente.'.
Realizadas todas las comprobaciones de los campos que componen el formulario, si estas han sido satisfactorias, se enviará el formulario y aparecerá el siguiente mensaje, advirtiendo de esta circunstancia al usuario: "Formulario enviado con éxito.".
A continuación, antes de empezar con la validación desde el lado del servidor, se muestra el formulario rellenado correctamente y por completo.
Por último, a modo de resumen, se muestran los métodos, propiedades y eventos de JavaScript utilizados en la validación del formulario propuesto y su descripción.
Formulario de ejemplo
| Evento | Descripción |
| onsubmit | Ejecuta el código JavaScript al realizarse el envío del formulario, es decir, al pulsar el botón de envío del formulario. |
| Onblur | Permite comprobar la validez de un dato al retirar el foco del campo en el que se está. |
| Propiedad | Descripción |
| length | Devuelve el número de caracteres que tiene una cadena de texto. |
| selectedIndex | En listas desplegables, indica el índice de la opción seleccionada. |
| Método | Descripción |
| toUpperCase() | Transforma todos los caracteres de una cadena a mayúsculas. |
| toLowerCase() | Transforma todos los caracteres de una cadena a minúsculas. |
| indexOf(subcadena) | Devuelve la posición en la que se encuentra la primera aparición de la subcadena dentro de una cadena. |
| lastIndexOf(subcadena) | Devuelve la posición en la que se encuentra la última aparición de la subcadena dentro de una cadena. |
| substring(inicio,fin) | Extrae una parte de una cadena de texto. |
| charAt(posición) | Obtiene el carácter que se encuentra en la posición indicada. |
| parseInt() | Convierte una cadena dada a número de tipo entero. |
| addClass() | Asocia una clase a un elemento o conjunto de elementos HTML. |
| removeClass() | Anula una clase asignada a un elemento o conjunto de elementos HTML. |
| test() | Comprueba si existe un patrón (por ejemplo una expresión regular) dentro de una cadena. Devuelve true si existe y false en caso contrario. |
Validación en el lado del servidor (PHP)
El hecho de haber realizado previamente una validación desde el lado del cliente puede llevar al programador a pensar que ya no son necesarias algunas o todas esas comprobaciones en el servidor. Pero, como se ha mencionado ante-riormente, la validación en el servidor es necesaria, dado que el usuario puede deshabilitar JavaScript desde el navegador o estar deshabilitado por defecto. Por este motivo, es recomendable realizar de nuevo las comprobaciones pertinentes.
Aunque se podría usar también Active Server Pages (ASP) u otra tecnología para llevar a cabo la validación en el servidor, se usará PHP. El motivo de esta elección radica en varios aspectos, entre los que destacan:
Sabía que...
ASP nació en 1996. No es un lenguaje de programación, sino que se trata de una tecnología creada por Microsoft para la creación de páginas web.
Como ejemplo, se utilizará el mismo formulario que en el caso del cliente. El formulario HTML se ha integrado en el PHP, ya que es la única forma de mostrar los mensajes de error al mismo tiempo que se muestra el formulario.
Si el formulario ha sido enviado, se comprueban los errores. Para ello, se reciben los valores facilitados por el usuario para cada uno de los campos del formulario a través del método “POST” ($_POST) y se asignan a sus determinadas variables:
Nota
No se comprueba si existen los valores con la función (isset()), puesto que siempre se enviará algo, aunque sea un valor nulo o vacío.
Lo siguiente será comprobar que las variables en las que se han recogido los datos insertados por el usuario no sean nulas, verificando de esta forma que no existan errores en el formulario.
Como puede apreciarse, se realizan las llamadas a las funciones que comprueban si el dato facilitado cumple los requisitos requeridos (en este caso el nombre). En caso de no ser así, cada función devolverá un valor y, en función de ese valor, aparecerá un mensaje de error determinado o el mensaje de confirmación para ese campo en concreto.
Más adelante, se detalla el funcionamiento de cada una de estas funciones. Primero, se sigue explicando el funcionamiento global del formulario.
Si “errores” ($errores) no está definido, significa que todos los campos se han rellenado correctamente. Por tanto, se muestra el mensaje "Datos recibidos correctamente" y se indica mediante $mostrar = false que no se mostrará el formulario.
En caso contrario, hay algún error. Se recorre el array con un bucle foreach y se muestran los mensajes de error. Además, se sigue mostrando el formulario ($mostrar = true;), puesto que faltan datos por introducir.
Por último, cabe señalar que en el atributo value de cada campo se comprueba que la variable que contiene el valor de dicho campo está asignada. En caso afirmativo, se imprime el valor y se recoge. De esta forma, no se pierden los valores en caso de que falten datos en el formulario y este deba ser mostrado nuevamente con los mensajes correspondientes. Por ejemplo, para el campo “nombre”:
A continuación y de manera individual, como se hiciera para el lado del cliente, se detalla el funcionamiento de las funciones que dan validez a cada uno de los campos que componen el formulario.
Validación del campo de texto “nombre”
El campo “nombre” será un campo de texto que el usuario tendrá que completar obligatoriamente.
Al ser de carácter obligatorio, el usuario no puede dejar vacío este campo. Si lo hace, la función devuelve valor 0, mostrándose el mensaje de error "Debe introducir su nombre.".
Por otro lado, si el usuario introduce cualquier carácter no definido en la expresión regular "^([A-Za-zÑñáéíóúÁÉÍÓÚ ]+)$", es decir, letras mayúsculas o minúsculas con o sin tilde, la función devuelve -1, mostrándose el mensaje de error "Nombre no válido. Solamente puede introducir texto.".
Si el campo “nombre” se rellena satisfactoriamente, la función devuelve 1. Por tanto, si el resto de campos también se han facilitado correctamente, el formulario se enviaría.
Validación del Documento Nacional de Identidad (DNI)
Como en el caso anterior, el usuario no podrá dejar vacío este campo, dado su carácter obligatorio. Dicho esto, el DNI solo se considerará válido cuando esté formado por ocho cifras consecutivas, seguidas de la letra correspondiente (XXXXXXXXLETRA). Las comprobaciones necesarias para ello se implementan en el siguiente código:
En primer lugar, se guardan en el array $valoresLetra las letras que pueden formar parte de un DNI válido. Si el DNI introducido tiene el formato requerido, se realizará la comprobación correspondiente a la letra que le pertenece. Antes, se debe comprobar que se ha introducido un valor en este campo. Si no es así, la función devolverá valor 0 y se mostrará el mensaje "Debe introducir su D.N.I.".
Si, por el contrario, el usuario ha completado este campo, habrá que comprobar que el formato del DNI es correcto, es decir, ocho cifras consecutivas seguidas de la letra correspondiente. Para ello, en primer lugar se comprueba que el valor introducido en este campo no tenga una longitud distinta a 9 (strlen($dni) != 9) y que el último carácter de esta cadena sea una letra (!(ereg("[A-Za-z]", $dni[8]))).
Nota
La función (strlen()) devuelve la longitud de una cadena dada.
Si no se cumple el formato especificado, la función devolverá -1 y se muestra el mensaje de error "D.N.I. no válido.".
Cumplidos los dos primeros requisitos, lo último será comprobar que la letra introducida es correcta. Antes de eso, se comprueba de que el DNI tiene el formato requerido haciendo uso de la función preg_match(), que compara la expresión regular que se usará para hacer la comparación (/^[0-9]{8}[A-Za-z]/) con la cadena a comparar ($dni). Por tanto, si el DNI está formado por nueve caracteres, siendo los ocho primeros numéricos (del 0 al 9) y el último una letra (mayúscula o minúscula), el DNI tiene el formato correcto y se procede a comprobar la validez de la letra.
Recuerde
Para calcular la letra perteneciente a un DNI, hay que dividir el número de DNI entre 23 y quedarse con el resto. Ese resto indica la posición que ocupa la letra correspondiente a ese número de DNI en el array $valoresLetra en este caso.
Una vez que se ha calculado la letra que corresponde al número de DNI introducido, se comprueba si coincide con la facilitada por el usuario. Para ello, la letra introducida por el usuario se transforma en mayúscula con la función strtoupper() para poder compararla con las letras del array, ya que estas están en mayúscula. Si la letra proporcionada no pertenece al número de DNI facilitado, la función devuelve -2 y se muestra el mensaje "D.N.I. no válido. Letra incorrecta.". Si, por el contrario, está todo en orden, la función devuelve 1 y el formulario sería enviado en caso de estar el resto de campos completados satisfactoriamente.
Actividades
14. Investigue la utilidad de los casting en programación. Razone el cometido del casting utilizado en el código anterior.
Validación de la fecha de nacimiento
El usuario no está obligado a rellenar este campo, al no tener carácter obligatorio. Si no lo hiciera, la función devolverá 1 y el formulario será enviado si se cumplen los requisitos establecidos para el resto de campos. No obstante, en caso de que el usuario facilite este dato, hay que realizar las mismas comprobaciones que se hicieron en el lado del cliente, tales como que el formato de fecha sea el requerido (dd/mm/aaaa).
El código que permite realizar estas tareas de validación puede ser el siguiente:
Habiendo rellenado este campo (en otro caso no se haría comprobación alguna), lo primero será comprobar que solamente se han introducido números y las barras que separan el día, el mes y el año. Si esto es así, lo siguiente es tener en cuenta que una fecha con el formato indicado (día/mes/año) no puede tener una longitud menor a 8 o superior a 10 caracteres.
Ejemplo
Fecha de nacimiento con 8 caracteres: 1/1/1985.
Fecha de nacimiento con 10 caracteres: 10/10/1985.
En caso de no cumplirse alguna de estas condiciones, la función devolverá valor 0 y se mostrará el mensaje "Fecha no válida. Revise el formato: (día/mes/año).".
Si el formato es el correcto, el próximo paso es separar el día, el mes y el año para realizar las comprobaciones individuales que sean oportunas. Para obtener estos tres valores, se hace uso de la función explode(), que permite dividir una variable conforme a un separador especificado (en este caso, la variable es $fecha y el separador la barra “/”).
Actividades
15. Implemente un trozo de código alternativo que lleve a cabo la extracción del día, el mes y el año de una fecha dada.
Almacenados el año en la variable $dia, el mes en la variable $mes y el año en la variable $anyo, lo siguiente será comprobar que la fecha existe, es decir, que es una fecha válida. El mes deberá estar comprendido entre 1 y 12, y el día entre 1 y 31, salvo los meses de abril, junio, septiembre, y noviembre, que tendrán un máximo de 30 días, y el mes de febrero, que tendrá como norma general un máximo de 28 días, siendo 29 en el caso de años bisiestos. En cuanto al año, se ha fijado como mínimo el 1913 y como máximo el 1995.
Recuerde
Un año es bisiesto si es divisible entre 4, a menos que sea divisible entre 100. No obstante, si es divisible entre 100 y además divisible entre 400, también es bisiesto. El código para resolver este problema es:
Si el año es bisiesto, la función devuelve true. Devolverá false en caso contrario.
Si el día no es correcto, la función devuelve -1, mostrándose el mensaje "El día introducido no es válido.". En caso de ser el mes incorrecto, la función devolverá -2 y el mensaje será "El mes introducido no es válido.". Por su parte, devolverá -3, mostrándose el mensaje "El año introducido no es válido.", si el año introducido no está en el rango indicado (entre 1913 y 1995).
Si la fecha de nacimiento del usuario es válida, la función devuelve 1 y el formulario será enviado.
Validación del número de teléfono
Como ocurre con la fecha de nacimiento, el número de teléfono no tiene carácter obligatorio. Aun así, hay que definir unas determinadas reglas a cumplir por este campo para el caso en el que el usuario lo rellene:
El código propuesto es:
En este caso, las comprobaciones son más sencillas. En el caso de que el usuario haya introducido algún valor en el campo destinado al número de teléfono, hay que comprobar que no tiene una longitud distinta a 9 caracteres (strlen($telefono) != 9). Si esa primera condición no se cumple, la función devuelve false y se muestra el mensaje "Teléfono no válido. Revise su formato: (XXXXXXXXX).". Si esta condición se ha cumplido, lo siguiente es comprobar que esos 9 caracteres son números. Para eso, se hace uso de la función is_numeric(), que permite saber si la variable pasada como parámetro es un número o una cadena numérica exclusivamente (no se permiten letras, espacios, etc.). Si no es así, la función devolverá false y aparecerá el mensaje anterior.
En caso de haber completado el campo de forma satisfactoria, la función devuelve true y el formulario es enviado.
Actividades
16. Implemente el código anterior haciendo uso de las expresiones regulares.
Validación del correo electrónico
Este campo tampoco tiene carácter obligatorio, por lo que, si el usuario lo deja vacío, el formulario se enviará sin problema.
No obstante, hay que definir una serie de restricciones que realicen las comprobaciones pertinentes en caso de que el usuario introduzca su dirección de correo electrónico. Para ello, se presenta el siguiente código:
Recuerde
Una dirección de correo electrónico está formada por un nombre de usuario, la arroba (@), el servidor y el dominio.
La función filter_var() facilita enormemente la tarea de validación de este campo. A esta función se le pasa como primer parámetro la variable a verificar ($correo) y como segundo el filtro FILTER_VALIDATE_EMAIL, que comprueba si la variable especificada es una dirección de correo electrónico válida. Si no es así, la función devuelve false y muestra el siguiente mensaje "Dirección de correo electrónico no válida.". En otro caso, devolverá true y el formulario podrá ser enviado.
Actividades
17. ¿Sería posible implementar una función que valide el e-mail usando expresiones regulares? Razone su respuesta. En caso afirmativo, ponga algún ejemplo.
Validación del campo ocupación (tipo select)
El último campo por validar es el destinado a conocer la ocupación del usuario. En este caso, hay que comprobar que el usuario ha marcado una de las ocupaciones incluidas en la lista desplegable (“Empleado”, “Desempleado” o “Estudiante”), ya que este campo está definido como obligatorio.
Si se dejara este campo sin marcar, la función devuelve false, apareciendo el mensaje “Debe seleccionar una ocupación.”, lo que implica que el formulario no se enviará.
Un posible código para llevar a cabo este tipo de comprobaciones sería:
Como se ha mencionado, el único requisito que debe cumplir este campo es que se haya marcado alguna de las opciones de la lista. Si esto se cumple, la función devuelve true y el formulario es enviado satisfactoriamente.
Comprobada la validez del formulario, este está listo para ser enviado. Cuando el usuario pulse sobre el botón Enviar, se mostrará el mensaje de confirmación "Datos recibidos correctamente.".
Al igual que se hiciera con las funciones de JavaScript, se muestra a modo de resumen una tabla con las funciones de PHP empleadas en las funciones de validación anteriores.
| Función | Descripción |
| isset(variable) | Comprueba si la variable especificada está definida. Si es así, devuelve true. |
| strlen(cadena) | Devuelve la longitud de una cadena dada. |
| strtoupper(cadena) | Transforma a mayúsculas la cadena especificada. |
| preg_match(expresión regular, cadena) | Compara la expresión regular definida con la cadena especificada. |
| explode(separador, variable) | Divide la variable pasada como parámetro conforme al separador definido. |
| is_numeric(variable) | Comprueba si la variable pasada como parámetro es un número o una cadena numérica. En caso afirmativo, devuelve true. |
| filter_var(variable, FILTER_VALIDATE_EMAIL) | Comprueba si la variable pasada como primer parámetro es una dirección de correo electrónico válida. Si es así, devuelve true. |
Aplicación práctica
Se dispone de los datos (nombre, DNI y fecha de nacimiento) de varios usuarios recogidos mediante el formulario (PHP) correspondiente. Para una mejor organización de esos datos, se decide aunar los correspondientes a cada usuario.
¿Cómo llevaría a cabo este procedimiento?
SOLUCIÓN
En este caso, es de gran utilidad la función “implode()”. Con ella, se consigue unir varios elementos en un array, separados por comas, espacios o el carácter que se desee.
Tras almacenar en el array $datos el nombre, el DNI y la fecha de nacimiento del usuario, lo siguiente es unirlos en una única variable ($datosUsuario) separados por la barra “/”, haciendo uso de la función implode(). Finalmente, con echo se muestran los datos del usuario en la forma solicitada.
Tras haber finalizado el desarrollo del formulario propuesto, lo siguiente será realizar las pruebas pertinentes. Será necesario comprobar todas y cada una de las restricciones definidas al inicio.
Se realizarán las pruebas solamente sobre el formulario, que comprobará la validez desde el lado del cliente, puesto que en el servidor seguirían el mismo procedimiento.
En primer lugar, se muestra el formulario tal y como lo encontraría el usuario al acceder al sitio web.
Formulario a completar por el usuario
Aparecen vacíos todos los campos que componen el formulario: “Nombre”, “D.N.I.”, “Fecha de nacimiento”, “Número de teléfono”, “Email” y “Ocupación”. En la parte inferior del formulario, aparece la leyenda correspondiente a los campos de carácter obligatorio ((*) Campos obligatorios), para que el usuario tenga constancia de ello, y el botón de envío del formulario (Enviar).
Si el usuario pulsara en este momento el botón Enviar, se mostrará el mensaje de error “Debe rellenar este campo.” al lado de los campos correspondientes, advirtiendo al usuario de que, para enviar el formulario, es necesario que al menos los campos obligatorios hayan sido completados.
Campos de carácter obligatorio
Nota
Completar un formulario no debe ser un problema excesivo para los usuarios. El formulario debe ser práctico, útil, etc. En definitiva, hay que facilitar la experiencia del usuario a la hora de completarlo, de ahí la importancia de la usabilidad.
En el formulario propuesto, se ha intentado resolver el problema de la usabilidad insertando mensajes en color (rojo de error y verde de confirmación), descriptivos y bien situados.
El primer campo a rellenar es el destinado al nombre del usuario. Si este intenta completar el campo con caracteres que no sean letras (números, caracteres especiales, etc.), se muestra el mensaje de error “Valor no válido. Solamente puede introducir texto.”, informando al usuario de tal circunstancia.
Campo “nombre”
En el caso de que el usuario introduzca su nombre correctamente, es decir, que introduzca una cadena que contenga texto exclusivamente, se lanza el mensaje “Campo rellenado correctamente.” al lado de este campo.
Campo “nombre” rellenado con éxito
El siguiente campo a rellenar es el destinado al DNI. En el caso de que se introduzca una cadena cuyo formato no sea ocho cifras consecutivas seguidas de la letra correspondiente, se muestra el mensaje de error “Formato de D.N.I. no válido. Recuerde: (XXXXXXXXLETRA).”.
Formato de DNI no válido
Si el formato del DNI es el correcto, pero la letra introducida no es la que pertenece a ese número, aparece el mensaje de error “La letra del D.N.I. no es correcta.”.
Letra de DNI incorrecta
Si el campo ha sido completado cumpliendo las anteriores restricciones, se muestra el mensaje “Campo rellenado correctamente.”.
Campo “DNI” rellenado con éxito
Al no tener carácter obligatorio, el usuario no está obligado a introducir su fecha de nacimiento. No obstante, en el caso de que introduzca una fecha, se deberá comprobar que día, mes y año son correctos.
Antes de comprobar si el día, el mes y el año son válidos, hay que comprobar si el formato de la fecha es el requerido (dd/mm/aaaa). El usuario debe introducir día, mes y año en este orden y separados por la barra “/”. Si no se cumple este requisito, se lanza el mensaje de error “La fecha introducida no tiene un formato válido.”.
Formato de fecha incorrecto
En caso de que el formato sea el correcto, lo siguiente será comprobar que los valores introducidos para día, mes y año son válidos. Para el caso del día, este no podrá ser menor de 0 ni mayor de 31 en ningún caso. Además, hay que tener en cuenta que en los meses de abril, junio, septiembre y noviembre tienen 30 días. Por su parte, febrero tendrá 28 o 29 días como máximo (dependiendo de si el año es bisiesto o no). Dicho esto, si el día introducido no es correcto, se lanza el mensaje de error “El día introducido no es válido.”.
El día introducido no es válido
Si el día es correcto, pero no así el mes, el mensaje de error será “El mes introducido no es válido.”.
El mes introducido no es válido
Comprobados el día y el mes, solo resta comprobar el año. Si este es menor a 1913 o mayor a 1995, el mensaje de error a mostrar es “El año introducido no es válido.”.
El año introducido no es válido
Conseguido primeramente el formato requerido y tras comprobar que los valores del día, el mes y el año son válidos, el mensaje a mostrar es “Campo rellenado correctamente.”.
Campo “Fecha” rellenado con éxito
Como ocurre con la fecha, el número de teléfono no es obligatorio completarlo, pero, si el usuario rellena este campo, habrá que realizar las comprobaciones oportunas. Solamente se permite introducir números (deberán ser nueve) y de forma consecutiva. Si este formato no se respeta, es decir, si no se introducen números únicamente y de forma consecutiva, se mostrará el mensaje de error “El teléfono introducido no es válido. Recuerde su formato: (XXXXXXXXX).”.
Telefono no válido. Formato incorrecto
Actividades
18. Investigue qué posibles mejoras se pueden incorporar sobre el formulario de ejemplo para abordar el problema de la usabilidad. Razone su respuesta.
19. Implemente las mejoras propuestas en el formulario.
Si el usuario introduce un número de teléfono válido, se mostrará el mensaje de confirmación “Campo rellenado correctamente.”.
Campo “Número de teléfono” rellenado con éxito
El próximo campo a rellenar es el correspondiente a la dirección de correo electrónico del usuario. Como en los dos casos anteriores, su carácter no es obligatorio, pero, si el usuario lo rellena, será necesario comprobar que cumple los requisitos establecidos inicialmente. El e-mail deberá tener el siguiente formato, pudiéndose insertar números o letras indistintamente: nombre@servidor. dominio. En caso de introducir un e-mail no válido, se mostrará el mensaje de error “El email introducido no es válido. Recuerde su formato: (nombre + @ + servidor + dominio).”.
Campo “Email” no válido
Al igual que en el resto de casos, si la dirección de correo electrónico proporcionada por el usuario es válida, se muestra el mensaje “Campo rellenado correctamente.”.
Campo “Email” rellenado con éxito
Por último, el usuario deberá seleccionar una ocupación de las que se ofrecen en la lista desplegable de este campo, no pudiendo dejar sin seleccionar una de ellas, dado su carácter obligatorio. Si no se seleccionara ninguna de las opciones, se muestra el mensaje “Debe seleccionar una ocupación.”.
Operación sin seleccionar
Una vez completado el formulario correctamente, este ya está listo para ser enviado.
Formulario completado correctamente
El último paso entonces será enviar el formulario. Al pulsar sobre el botón Enviar, se mostrará un mensaje de confirmación.
Formulario enviado con éxito
Aplicación práctica
En su empresa, disponen de un listado de funciones útiles para llevar a cabo validaciones tanto en el lado del cliente como en el lado del servidor. Para hacer más fácil la localización y utilización de estas, usted deberá clasificarlas en una tabla según pertenezcan al lenguaje JavaScript o al lenguaje PHP.
Las funciones que componen el listado son:
SOLUCIÓN
| JavaScritp | PHP |
| parseInt() | isset() |
| removeClass() | strtoupper() |
| test() | is_numeric() |
| lastIndexOf() | explode() |
La validación de datos en una página web es un proceso indispensable para asegurar la integridad y fiabilidad de los datos introducidos por el usuario, evitando por ejemplo errores por ataques malintencionados.
Esta validación se recomienda hacerla tanto del lado del cliente como del lado del servidor, siendo en este último caso necesaria, dado que, entre otras circunstancias, el JavaScript puede estar deshabilitado en el navegador.
Entre las validaciones más comunes, destacan la comprobación de los campos de carácter obligatorio, la inserción de datos, la suscripción a servicios, la administración del error 404, etc.
La técnica de validación variará en función del tipo de dato a comprobar. Por ello, se deben definir las validaciones a llevar a cabo para posteriormente implementarlas. Una vez traducidas esas funciones de validación al lenguaje de programación deseado, lo último será ejecutar ese código para comprobar que todas las funcionalidades cumplen los objetivos propuestos. Si el resultado de esas pruebas no es el esperado, se tendrán que realizar las modificaciones pertinentes. En otro caso, la aplicación estaría lista.
Ejercicios de repaso y autoevaluación
1. De las siguientes afirmaciones, indique cuál es verdadera o falsa.
2. Relacione las siguientes funciones con el lenguaje al que correspondan.
3. En JavaScript, para hacer la validación de un campo de forma instantánea existen diferentes eventos, pero, ¿cuál de los siguientes se activa cuando el usuario deja de pulsar una tecla?
4. Busque en la siguiente sopa de letras cinco conceptos relacionados con la validación de datos.
5. Ordene los pasos que forman parte del ciclo de vida del software: código, mantenimiento, implementación, especificación de requisitos, pruebas, diseño.
6. Complete la siguiente oración.
ASP nació en ______. ______ es un lenguaje de programación, sino que se trata de una ______ creada por ______ para la ______ de páginas web.
7. Para pasar una cadena de texto a minúsculas con JavaScript se utiliza la función...
8. ¿Cuál de las siguientes no es una ventaja de PHP con respecto a otras tecnologías?
9. ¿En qué consiste la validación de datos?
10. Relacione las siguientes funciones con su descripción.
11. Complete la siguiente oración.
Las expresiones regulares son ___________ que, usando una serie de ___________, definen la sintaxis de un ____________ para poder validarlo, manipularlo e incluso ______________.
12. Señale la afirmación correcta.
13. Relacione los siguientes caracteres empleados en la creación de expresiones regulares con su descripción.
14. Complete la siguiente oración.
URL es el acrónimo de __________ __________ __________, localizador de recursos y permite localizar o __________ de forma sencilla a cualquier recurso de la __________ desde el __________ de la World Wide Web.
15. Indique cuál de las siguientes afirmaciones sobre jQuery no es cierta.