Hasta ahora hemos ido aprendiendo las diferentes etiquetas HTML para crear elementos en un formulario, así como personalizarlas con contenido o atributos de dichas etiquetas. Sin embargo, al crear un formulario en HTML, debemos ser conscientes de un detalle ineludible: los usuarios se equivocan al rellenar un formulario.
Ya sea por equivocación del usuario, ambigüedad del formulario, o error del programador del formulario, el caso es que debemos estar preparados y anticiparnos a estos errores, para intentar que los datos lleguen correctamente a su destino, con el formato adecuado y esperado, y evitar cualquier tipo de moderación o revisión posterior para no perder tiempo.
Para evitar estos casos que hemos mencionado, se suele recurrir a un tipo de proceso automático llamado validación. En dicho proceso, establecemos unas pautas para comprobar si el usuario ha introducido la información de forma correcta o en el formato esperado, y en caso contrario, tenga que corregir los datos si quiere enviar el formulario correctamente.
Un esquema tradicional de validación de ejemplo podría ser el siguiente:
Este sería un sistema de validación clásico, sin embargo, tiene varios problemas que comentaremos a continuación que no lo hacen un sistema de validación adecuado. Vamos a revisar el esquema anterior paso a paso, creando escenarios derivados, para detectar los posibles problemas y llegar a un sistema de validación más apropiado.
El peor caso que podríamos plantear sería el siguiente: el formulario no tiene validación de ningún tipo. Ni en el frontend, ni en el backend.
Es el peor escenario posible, puesto que el usuario podría enviar información incorrecta, o incluso hasta datos malintencionados que podrían comprometer la seguridad del servidor, guardando información incorrecta, corrompiendo la base de datos u otros problemas.
Otro caso podría ser que el formulario tenga validación sólo en el front-end, es decir, en el navegador. Aunque es una mejora, sigue sin ser adecuado.
Este escenario plantea un problema grave. La validación del frontend se puede desactivar o modificar, por lo que un usuario malintencionado podría eliminar dicha capa de validación y estaríamos en el mismo escenario anterior. La validación de frontend tiene como objetivo aumentar la velocidad de respuesta y permitir validar los datos sin que tenga que viajar al backend y volver al front, por lo que la latencia es mucho menor. Sin embargo, nunca se debe confiar sólo en una validación de frontend.
Como veremos más adelante, las validaciones en frontend se pueden hacer con Javascript (más tradicionales) o utilizando ciertos atributos de HTML (más moderna). Incluso puedes utilizar una mezcla de ambas.
Veamos un nuevo escenario. El tercer caso posible es uno donde el formulario tiene validación sólo en el back-end.
En este escenario, al tener validación en el backend, no dejaremos pasar casos malintencionados. Sin embargo, la desventaja de este método es que el usuario puede rellenar un formulario y se debe enviar al backend para que lo valide, lo que tiene dos problemas principales:
Por último, tendríamos el caso ideal, donde el formulario tiene validación en el frontend y en el backend, también denominado doble validación.
Recuerda siempre realizar la validación en el servidor o back-end, ya que puede evitar problemas graves de seguridad.
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev