La validación de datos en el lado del cliente nos permite “limpiar” los valores de los controles de formulario que solicitamos a nuestros usuarios. Se trata de una práctica necesaria, que nos ayudará a mantener la integridad y seguridad de nuestras bases de datos.
Pese a ello, la validación de datos en el lado del cliente siempre va a ser insuficiente. Debe complementarse con una validación en el lado del servidor, que será la que realmente determine si la información que nos está proporcionando el usuario es correcta y, en caso contrario, tratará de sanearla.
Entonces, ¿por qué es tan importante validar los datos en el lado del cliente si realmente es el backend quien va a encargarse de la validación final? ¿No es redundante e innecesaria esta primera validación?
En realidad no. Para que nuestro backend pueda realizar su validación, será necesario que el cliente haga una llamada a la acción o el servicio encargado de validar los datos. De modo que la validación previa nos permite:
- Ahorrar una llamada inútil, ya que si nos faltan datos o estos no tienen el formato correcto, no tiene sentido que hagamos esperar al usuario/a y trabajar al servidor.
- Ofrecer al usuario un feedback instantáneo. Por ejemplo, si ha escrito mal su dirección de correo electrónico o su contraseña tiene un formato inválido, podemos avisarle desde el mismo instante en que abandone el campo, evitando esperas y la gestión del mensaje de error.
¿Cómo podemos validar datos desde el lado del cliente?
Disponemos de dos útiles herramientas para validar datos en el lado del cliente:
- HTML5. Es rápida, aunque poco personalizable.
- JavaScript. Ofrece más posibilidades de personalización, pero requiere un mayor esfuerzo por parte del desarrollador y del navegador.
Recuerda que esta validación es una mera verificación inicial, pero es importante para garantizar una buena experiencia de usuario. Sin embargo, al ejecutarse en el lado del cliente se puede sortear, así que no se trata de una comprobación segura.
Pese a ello, al ejecutarse en el navegador de nuestros usuarios/as, esta validación ofrece un feedback instantáneo. Así, podemos configurar nuestro formulario para que ofrezca mensajes del tipo “este campo es requerido” o “el formato utilizado es incorrecto” e impida la remisión de datos insuficientes o mal formateados.
¿Cómo validar datos en el lado del cliente con HTML5?
Algunos de los atributos HTML5 que podemos incorporar a nuestros formularios y que nos sirven para validar datos son:
- required. Indica que el campo debe rellenarse para poder enviarse el formulario.
- minlength y maxlength. Indican la extensión mínima y máxima de las cadenas de texto.
- min y max. Indican los valores mínimo y máximo de los valores numéricos.
- type. Indica si el dato debe corresponderse con algún formato predeterminado, como un número de teléfono o un correo electrónico. Una de sus ventajas es que permite al navegador determinar la fuente del input (por ejemplo, abriendo la libreta de direcciones cuando pedimos un email o un teclado numérico si pedimos un número). Los tipos disponibles son:
- email.
- search.
- tel.
- url.
- number.
- range.
- datetime-local.
- month.
- time.
- week.
- color.
- file.
- multiple. En combinación con campos como email o file permite la introduccion de varios valores.
- pattern. Se le puede proporcionar una expresión regular, que se contrastará con la información proporcionada para validarla.
Recuerda que si la información proporcionada reúne estos requisitos, el elemento recibirá una pseudoclase :valid, lo que nos permitirá aplicar un estilo específico para los datos válidos.
Del mismo modo, se atribuirá una pseudoclase :invalid (y a veces, otras como :out-of-range) que bloqueará el envío del formulario y nos permitirá la utilización de estilos específicos cuando haya errores de validación.
[codepen_embed height="300" default_tab="css,result" slug_hash="NWybJKV" preview="true" editable="true" user="agarzon48"]See the Pen
Frontend validation using HTML5 (required + pattern) by Adrián Garzón (@agarzon48)
on CodePen.[/codepen_embed]
¿Cómo validar datos en el lado del cliente con JavaScript?
La validación de datos con JavaScript nos permite implementar una funcionalidad 100% personalizada. Para ello podemos:
- Utilizar la API de validación de restricciones.
- Escribir nuestro propio código de validación.
La API de validación de restricciones
Admitida por la mayoría de los navegadores, la API de validación de restricciones (constraint validation API) nos permite interactuar con los métodos y propiedades de los elementos de nuestros formularios.
Algunos de los elementos disponibles son:
- HTMLButtonElement
- HTMLFieldSetElement
- HTMLInputElement
- HTMLOutputElement
- HTMLSelectElement
- HTMLTextAreaElement
Cada uno de ellos representa exactamente lo que describe: botones, inputs, selects… A su vez, nos permiten acceder a las siguientes propiedades:
- validationMessage. Nos permite interactuar con el mensaje de validación.
- validity. Nos ofrece un objeto ValidityState que permite acceder a las propiedades que definen el estado de validación del elemento:
- patternMismatch
- tooLong
- tooShort
- rangeOverflow
- rangeUnderflow
- typeMismatch
- valid
- valueMissing
- willValidate. Devuelve true cuando el elemento vaya a validarse con el envío del formulario y false en caso contrario.
Asimismo, la API de validación de restricciones expone dos métodos útiles, que podemos utilizar sobre la primera lista de elementos:
- checkValidity(). Devuelve true si el elemento no arroja errores de validación y false en caso contrario. Además, siendo false disparará un evento invalid en el elemento que estemos comprobando.
- setCustomValidity(message). Añade un mensaje de error personalizado.
[codepen_embed height="300" default_tab="css,result" slug_hash="mdXOoWQ" preview="true" editable="true" user="agarzon48"]See the Pen
Frontend validation using Constraint Validation API by Adrián Garzón (@agarzon48)
on CodePen.[/codepen_embed]
Notas sobre la validación en JavaScript
La API de validación de restricciones trabaja con los elementos nativos del navegador, lo que limita nuestra capacidad de personalización del comportamiento del formulario. Sin embargo, podemos utilizar el atributo novalidate para deshabilitar la validación nativa de HTML5 y utilizar nuestro propio código de validación.
Recuerda que el comportamiento por defecto del formulario es enviarse una vez detecta el evento submit. Por tanto, si queremos interrumpir este comportamiento (por ejemplo, porque nuestro código detecta un error de validación y no queremos que el formulario se envíe hasta que el usuario corrija los datos) deberemos utilizar el método preventDefault().
Este es un patrón comúnmente utilizado en frameworks donde gestionamos el frontend con JavaScript, como ocurre con React.js.
Por último, hay que tener en cuenta que nuestros usuarios/as siempre pueden deshabilitar JavaScript desde su navegador. En este caso, todo el trabajo de validación que realicemos con código propio quedará inhabilitado. De modo que debemos tener en cuenta esta posibilidad y decidir si, en consecuencia, ofreceremos una visualización alternativa o impediremos el acceso al formulario.
[codepen_embed height="300" default_tab="css,result" slug_hash="LYQbaOm" preview="true" editable="true" user="agarzon48"]See the Pen
Frontend validation using JS by Adrián Garzón (@agarzon48)
on CodePen.[/codepen_embed]
Nuestro código de validación
Hay casos en que la mejor opción será utilizar nuestro propio código de validación. Por ejemplo, cuando perseguimos una interfaz muy personalizada o cuando se va a acceder a nuestra aplicación desde navegadores antiguos.
En estos casos, deberemos:
- Establecer un tipo de validación. Podemos utilizar expresiones regulares o bien realizar comprobaciones más sencillas con los métodos de cadenas de texto que nos ofrece JavaScript. Recuerda que todos los valores de los elementos input son de tipo string, por lo que es probable que debas convertir el valor (por ejemplo, a números o fechas) antes de realizar la validación y, en su caso, enviar los datos al backend.
- Establecer el comportamiento ante el caso de que el formulario no se valide. En este caso es particularmente importante guiar al usuario/a para que sepa qué está fallando y cómo corregir sus errores.
Buenas prácticas en materia de validación de datos en el lado del cliente
Existen innumerables formas de realizar la validación de datos en el lado del cliente. Cada una de ellas tiene sus ventajas y desventajas, por lo que conviene conocerlas a la hora de planificar nuestra estrategia de validación.
¿Cuándo hacemos la validación?
Existen, al menos, tres momentos en que podemos realizar la validación:
- Al tratar de enviar el formulario.
- Cuando salimos del campo que estamos cumplimentando.
- Mientras cumplimentamos el campo.
Validación al enviar el formulario
Tradicionalmente se ha realizado la validación al tratar de enviar el formulario. Esto es lo que ocurre, por ejemplo, cuando la validación se realiza en el backend (salvo que utilicemos AJAX), pues necesitamos remitir la información para que el servidor compruebe su validación. También cuando postergamos el momento de validación a aquel en que el usuario/a hace clic en el botón de enviar.
Debemos tener en cuenta que algunos campos no se pueden comprobar hasta que no se intenta enviar el formulario. Esto ocurre, por ejemplo, con los campos requeridos, salvo que los establezcamos como inválidos desde el momento inicial.
Fuera de estos casos, la validación en el momento de remisión del formulario es fácil y cómoda de escribir, pero ofrece una experiencia de usuario pobre.
Validación al salir del campo que se está cumplimentando
En general, es mejor validar el campo una vez se ha cumplimentado. Para ello podemos utilizar los eventos de JavaScript blur o focusout, que se disparan cada vez que un elemento pierde su foco. La diferencia entre uno y otro es que focusout se propaga, mientras que blur no lo hace.
Al utilizar un evento blur o focusout, podemos disparar la validación desde el mismo instante en que el usuario/a ha terminado de cumplimentar el campo. De este modo ofrecemos un feedback instantáneo y vinculado a la última información solicitada. Esto hace más sencillo detectar qué campo está arrojando el error, lo que redunda en una mejor experiencia de usuario.
[codepen_embed height="300" default_tab="css,result" slug_hash="mdXOgWJ" preview="true" editable="true" user="agarzon48"]See the Pen
Frontend Validation Using JS: onblur/focusout by Adrián Garzón (@agarzon48)
on CodePen.[/codepen_embed]
Validación mientras se cumplimenta el campo
Una práctica más compleja, pero que mejora todavía más la experiencia de usuario, es la validación mientras se cumplimenta el campo. Para ello podemos utilizar un evento change o input, que se dispara cada vez que el usuario/a introduce un nuevo valor en el campo.
Aquí, una opción es que validemos cada vez que se dispare el evento change. Otra opción es activar un temporizador (setTimeOut) que ejecute la validación al poco tiempo de la última pulsación de tecla.
Recuerda que puedes guardar el temporizador en una variable, de tal modo que la forma de aproximarse a este enfoque sería:
- Cada vez que se recibe un cambio en el input, activamos un temporizador.
- Si el temporizador llega a cero, ejecutamos la validación.
- Pero si el usuario/a introduce un nuevo cambio en el input, eliminamos el temporizador anterior y creamos uno nuevo.
De este modo, demos dar al usuario/a un tiempo prudencial (por ejemplo, un segundo), validando cuando parece que ha terminado de introducir sus datos. Otra ventaja de esta aproximación es que podemos hacer validación asíncrona mediante AJAX, reduciendo el número de peticiones que hacemos a nuestro servidor. También podemos utilizar este enfoque para guardar información en nuestro servidor automáticamente.
Esto supone una mejor UX, pues ahora el usuario/a sabrá que ha cometido un error antes incluso de terminar de rellenar el campo. Por supuesto, podemos combinar esta técnica con la anterior, para darle feedback instantáneo antes incluso de que pase el tiempo establecido si ha salido del campo que estaba cumplimentando.
Evidentemente, esta técnica no nos servirá siempre. Además, habrá casos en que arrojará errores porque el usuario/a todavía no ha terminado de escribir su información (por ejemplo, mientras está introduciendo un número de teléfono o una dirección de correo electrónico).
[codepen_embed height="300" default_tab="css,result" slug_hash="PoQbgOG" preview="true" editable="true" user="agarzon48"]See the Pen
Frontend Validation Using JS: Delayed Auto-Validation by Adrián Garzón (@agarzon48)
on CodePen.[/codepen_embed]
¿Cómo ofrecemos nuestro feedback?
Otra cuestión clave a la hora de ofrecer feedback es cómo lo hacemos. Recordemos que el feedback debe incluir:
- Si se ha enviado o no el formulario.
- En caso de no haberse enviado a causa de algún error de validación, qué campo o campos contienen el error.
- Cómo resolver el error para poder remitir el formulario.
Recordemos que un campo requerido siempre va a arrojar un error si no se cumplimenta. De modo que no hay excusa para no señalar de antemano qué campos se deben cumplimentar obligatoriamente.
Respecto a los campos que tienen una validación más compleja, las prácticas habituales incluyen:
- Remarcar el campo erróneo de algún modo. Por ejemplo, aplicándole un fondo rojo.
- Indicar los campos erróneos en una lista.
- Ofrecer información inline. Es decir, dentro de la misma línea que contiene el error.
Listar los errores
El listado de errores es una técnica tradicional, muy utilizada cuando es el backend quien se encarga de la validación (salvo que estemos utilizando AJAX). De nuevo, su ventaja tiene que ver con la facilidad de escritura del código. Basta con que el backend devuelva una lista de errores y devuelva al usuario/a a la página del formulario, apareciendo la lista en pantalla.
El problema con esta estrategia es que el usuario/a sabrá dónde están los errores e, idealmente, la forma de resolverlos, pero todavía tendrá que buscar cada campo en el formulario. Por tanto, no es una interfaz muy útil, especialmente si tenemos una larga lista de errores.
[codepen_embed height="300" default_tab="css,result" slug_hash="rNJWbKQ" preview="true" editable="true" user="agarzon48"]See the Pen
Frontend Validation Using JS: List Of Errors by Adrián Garzón (@agarzon48)
on CodePen.[/codepen_embed]
Ofrecer información inline
Al ofrecer información en la misma línea en que se encuentra el campo inválido, facilitamos al usuario/a la localización del error. En general, esta es la mejor estrategia. Especialmente si la combinamos con las formas de validación más ágiles de las que hemos comentado anteriormente (mientras se rellena el campo o justo al salir del mismo).
Si lo hacemos así, el usuario/a ni siquiera tendrá que buscar el error, ya que lo verá instantáneamente. Incluso podríamos llevarle de nuevo al campo erróneo mediante JavaScript si queremos asegurarnos de que lo rellena correctamente antes de seguir con el formulario.
[codepen_embed height="300" default_tab="css,result" slug_hash="GRQNLXj" preview="true" editable="true" user="agarzon48"]See the Pen
Frontend Validation Using JS: Inline Feedback by Adrián Garzón (@agarzon48)
on CodePen.[/codepen_embed]
Remarcar los campos erróneos
Es fundamental que remarquemos los campos erróneos en nuestro formulario. Por ejemplo, una práctica común es aplicarles un borde rojo o un fondo con un color rojo claro o con cierta transparencia.
Otras estrategias
Existen otras estrategias que pueden ayudarnos a ofrecer un mejor feedback a nuestros usuarios/as al gestionar la validación de datos en el lado del cliente.
Una de ellas es la utilización de placeholders y tooltips para dar ejemplos e información detallada acerca de cómo esperamos que rellenen el campo.
Otra, que persigue la misma funcionalidad, es ofrecer consejos dinámicos. Por ejemplo, podemos reservar un espacio de ayuda y poblar su contenido cuando recibamos un evento focus, lo que nos permitirá ofrecer información relevante únicamente para el campo activo en cada momento.
Por último, debemos tener en cuenta cuál es el comportamiento que queremos reproducir cuando el formulario no se valida adecuadamente. En este sentido, existe la posibilidad de devolver al usuario/a a la página del formulario.
Este es un comportamiento frecuente, y debemos recuperar toda la información que sí haya introducido correctamente para ahorrarle su reintroducción. No hacerlo podría resultar en una experiencia frustrante.
Sin embargo, volver a la misma página puede ser ya frustrante, aunque parte del formulario ya esté rellenado. De ahí que también exista la posibilidad de utilizar una estrategia más acorde al “errors-only-approach”, que consiste en mostrar al usuario/a solo aquellos campos que contengan errores.
De este modo facilitamos la localización de los campos erróneos y evitamos enfrentar a nuestros usuarios/as al formulario completo de nuevo. Eso sí, para utilizar esta estrategia es posible que debamos persistir la información relativa a los campos correctamente validados. Algunas formas de hacerlo serían utilizando las queries de la URL (parámetros GET), el localStorage o el sessionStorage.
Conclusión: ¿Cómo validar datos en el lado del cliente?
En conclusión, la validación de datos en el lado del cliente es fundamental para garantizar una buena experiencia de usuario. Sin embargo, existen numerosas estrategias para validar nuestros formularios.
Para empezar, podemos optar entre utilizar solo la validación nativa de HTML5 o emplear JavaScript. En este último caso podemos combinar nuestro código con las funciones nativas de HTML5, aprovechar la API de validación de restricciones o, directamente, escribir nuestro propio código.
El crecimiento de la utilización de frameworks como React o Vue ha hecho que la validación de formularios tienda a ser más dinámica. Pero debemos recordar que esta pieza es esencial para diseñar páginas web y aplicaciones fáciles y cómodas de utilizar.
Por último, no olvidar que la validación final debe recaer en el backend. Hay comprobaciones que no pueden hacerse sin la ayuda de un servidor (por ejemplo, el único modo de comprobar que un correo electrónico existe y pertenece al usuario/a es enviando un mensaje de confirmación).
Checklist: cosas que no puedes olvidar al realizar la validación de datos en el lado del cliente
- La validación en el lado del cliente debe responder a razones de UX. La seguridad e integridad siempre debe recaer en el backend.
- El feedback ofrecido al usuario o usuaria debe ser claro. Si ha cometido un error u obviado información requerida, debe saber dónde está el error y cómo corregirlo de forma rápida, sencilla e intuitiva.
- Siempre deberíamos indicar qué campos son requeridos.
- El feedback que debemos ofrecer tiene que incluir también el momento en que el formulario se ha enviado sin errores.