() translation by (you can also view the original English article)
La validación de la entrada de formulario es algo que debe tomarse en serio. Con suerte, nada peor que los datos de elementos no utilizados se enviarán a un sitio que utiliza datos de formularios sin la validación adecuada. Sin embargo, también existe la posibilidad de que los piratas informáticos serán capaces de comprometer los datos privados de los usuarios que confiaron en ti con su información.
Dado que la validación es tan importante, tiene sentido que haya herramientas y bibliotecas para validar y desinfectar los datos tanto en el front-end como en el back-end.
En este tutorial, nos centraremos en usar las características integradas de HTML5 para validar diferentes tipos de entrada sin depender de bibliotecas externas. Obviamente, no debes detenerte en sólo la validación basada en HTML5, pero esto sería un buen comienzo para hacer que los formularios en el sitio web sean más seguros.
El elemento de entrada de formulario
Siempre que desees obtener algún tipo de entrada de los usuarios, lo más probable es que utilices el elemento de input HTML. No importa si quieres saber su nombre, apellidos, dirección de correo electrónico, la ciudad en la que viven actualmente, su número de teléfono o su equipo deportivo favorito. El elemento input es una forma muy fácil de usar para obtener información de nuestros visitantes.
Sin embargo, a algunos usuarios malintencionados les gustaría aprovechar el hecho de que pueden introducir casi cualquier tipo de cadena en un elemento de entrada y enviar un formulario. Del mismo modo, puede haber algunos usuarios que simplemente no sabían que estaban introduciendo los datos en un formato incorrecto.
Ambos problemas se pueden resolver muy fácilmente mediante el uso de algunos atributos HTML5 con los elementos del formulario.
El atributo Type
El atributo type determinará qué tipo de entrada se considera válida para un elemento determinado. Cuando no se especifica ningún valor para el atributo type, el tipo se establece en text de forma predeterminada. Esto básicamente significa que todo tipo de entradas de texto se considerarán válidas para ese elemento en particular. Esto está bien cuando deseas que los usuarios introduzcan sus nombres. Sin embargo, cuando deseas que introduzcan su dirección de correo electrónico o números como su edad y peso, es mucho mejor establecer el valor de atributo type en algo apropiado.
Aquí hay un par de valores que puedes elegir:
-
email: Esto pedirá a los usuarios que introduzcan su dirección de correo electrónico en un formato válido. Por ejemplo, no pueden simplemente escribir myemail.com o something@ o @something.com. Tendrán que introducir un valor similar a myemail@domain.tld. Por supuesto, todavía pueden ingresar correos electrónicos inexistentes , pero es un problema diferente. -
number: Esto se asegurará de que solo los números se consideren entradas válidas. Por ejemplo, cuando le preguntes a alguien su edad en un formulario, no podrán enviar papas o treinta y seis como insumo. Tendrán que escribir un número real como 36 o 15. -
url: Puedes establecer el atributo type enurlsi deseas que los usuarios introduzcan una dirección URL válida en el elemento de entrada. Esto evitará que entren en algo como tutsplus. Sin embargo, tutsplus.com también se considerarán no válidas: los usuarios tendrán que introducir una URL completa como https://tutsplus.com. -
tel: El uso de este valor no es tan útil como otros porque el formato de los números de teléfono varía en todo el mundo. No hay ningún patrón estándar que los navegadores puedan coincidir con la entrada para determinar si el número es válido. Sin embargo, establecer el tipo entelpuede ser útil en una etapa posterior cuando realices tu propia validación personalizada.
Hay muchos otros valores para el atributo type que se pueden utilizar para especificar el tipo de entrada que es válido para un elemento determinado. Puedes leer acerca de todos estos valores en la página de referencia del elemento input en MDN.
La siguiente demostración de CodePen muestra cómo podemos usar el atributo type para controlar lo que está permitido en diferentes campos de entrada.
Los atributos de longitud mínima y máxima
Una forma más de restringir lo que pasa como entrada válida para un elemento es utilizar los atributos minlength y maxlength. Estos establecen el número mínimo y máximo de caracteres que deben introducirse en un elemento de entrada para que sea válido.
Los valores correctos para ambos atributos variarán caso por caso. Por ejemplo, algunos sitios web podrían querer que un nombre de usuario tenga entre 4 y 15 caracteres, mientras que otros podrían limitar la longitud máxima a 12. Del mismo modo, las personas en algunos países tendrán nombres inusualmente cortos o largos en comparación con otros.
Uso de Regex para la validación de formularios
Establecer un valor de atributo de type ciertamente nos ayuda a limitar lo que pasa como entrada válida. Sin embargo, puedes ir aún más lejos y especificar un patrón que un nombre de usuario o dirección de correo electrónico tiene que seguir para ser considerado válido.
Supongamos que deseas asegurarte de que los nombres de usuario sean sólo alfanuméricos, esto se puede hacer fácilmente con la ayuda del atributo pattern. Sólo tienes que establecer su valor en una expresión regex que actuará como una guía para determinar qué entrada es válida y cuál no.
Estos son algunos ejemplos de uso de regex con el atributo pattern.
1 |
<input type="text" id="uname" name="uname" pattern="[a-zA-Z0-9]+" minlength="4" maxlength="10"> |
El patrón anterior seguirá comprobando que todos los nombres de usuario solo contengan caracteres de a-z, A-Z o 0-9. Por ejemplo, monty42, 42monty, MON42ty y mon42ty son todos nombres de usuario válidos en este caso, pero monty_42 no es válido.
Los atributos minlength y maxlength se asegurarán de que el nombre de usuario no sea demasiado pequeño o demasiado grande.
Si deseas que los nombres de usuario comiencen con un carácter en particular como un carácter de subrayado, simplemente puedes agregarlo al frente del patrón.
1 |
<input type="text" id="uname" name="uname" pattern="_[a-zA-Z0-9]+" minlength="4" maxlength="10"> |
Ahora, cada nombre de usuario que no comienza con _ y contiene cualquier carácter además de a-z, A-Z o 0-9 después de eso se considerará inválido.
Espero que esto ayude a aclarar cómo podemos usar el atributo pattern y algunos Regex para limitar lo que se considera entrada válida incluso cuando el atributo type se establece en text.
Validación avanzada con patrones Regex
También puedes utilizar el atributo pattern junto con otros tipos de elementos de entrada como email y url para restringir lo que se considera válido. Por ejemplo, supongamos que solo deseas que los usuarios introduzcan una dirección URL que sea subdominio de tutsplus.com. Simplemente puedes establecer el valor del atributo pattern en https://.*.tutsplus.com. Ahora, cualquier entrada como https://google.com o https://envato.com se considerará no válida. Incluso, https://code.tutsplus.com sería válido porque se supone que la dirección URL válida debe comenzar con https://.
Lo mismo se puede hacer con correos electrónicos, si deseas que los correos electrónicos terminen con algo específico, simplemente puedes usar el atributo pattern para eso. Aquí está un ejemplo:
1 |
<input type="email" id="email" pattern=".+@tutsplus.com|.+@envato.com"> |
Si el elemento de entrada anterior se utilizó en un formulario, los usuarios solo podrán introducir la dirección de correo electrónico que termina con tutsplus.com o envato.com. Esto significa que hi@gmail.com o howdy@something.com no serían válidas.
Echa un vistazo a nuestra hoja de trucos Regex de JavaScript para obtener más ejemplos de expresiones regulares y consejos sobre cómo usarlas.
Campos obligatorios y texto de marcador de posición
Aunque los atributos required y placeholder no están necesariamente relacionados con la validación, se pueden usar para mejorar la experiencia del usuario cuando alguien está rellenando un formulario.
No todo el mundo está dispuesto a compartir su información con un sitio web. Si un formulario contiene diez elementos de entrada diferentes, pero solo se requieren 5 o 6 de ellos para lo que deseas hacer y el resto son para obtener información adicional, es una buena idea informar a los usuarios.
Puedes marcar ciertos campos de entrada como necesarios utilizando el atributo required mientras dejas intactos los campos opcionales. Esto permitirá a los usuarios saber la información mínima absoluta que tienen que proporcionar al rellenar un formulario. También podría aumentar el número de personas que rellenan un formulario porque sabrán de antemano que llenar todos los campos no es absolutamente necesario.
El atributo placeholder también recorre un largo camino cuando se trata de hacer un formulario más fácil de usar. Por ejemplo, si no permites a los usuarios que sepan que tienen que escribir direcciones URL que comienzan con https:// y son subdominios de tutsplus.com, es posible que se den por vencidos después de archivar sin éxito el campo URL con something.com o code.tutsplus.com.
En el ejemplo siguiente, hemos utilizado los atributos pattern, required y placeholder para un control más detallado sobre la validación y una mejor experiencia del usuario.
1 |
<form>
|
2 |
<label for="name">Name: *</label> |
3 |
<input type="text" id="name" name="name" pattern="[a-zA-Z]+" placeholder="Monty" required> |
4 |
<br>
|
5 |
<label for="name">Company Email Address: *</label> |
6 |
<input type="email" id="email" name="email" placeholder="joe@company.com" pattern=".+@company.com" required> |
7 |
<br>
|
8 |
<label for="name">Age: </label> |
9 |
<input type="number" id="age" name="age" min="10" max="80" placeholder="30"> |
10 |
<br>
|
11 |
<label for="name">Favorite Tuts+ Website: *</label> |
12 |
<input type="url" id="website" name="website" pattern="https://.*\.tutsplus.com" placeholder="https://code.tutsplus.com" required> |
13 |
</form>
|
Pensamientos finales
En este tutorial, aprendimos a agregar validación básica a nuestros formularios simplemente usando HTML y Regex. El uso del valor correcto para el atributo type obligará a los usuarios a introducir información en un campo de entrada en un formato determinado. El uso de expresiones regulares con el atributo pattern puede ayudarnos a mantener la entrada válida más restringida.
Por último, aprendimos a usar el atributo placeholder para asegurarnos de que los formularios que creamos son fáciles de usar y las personas que rellenan información no se frustren porque no conocen el formato de entrada que consideramos válido.
La validación del formulario ciertamente no termina aquí. En nuestro siguiente tutorial, aprenderás sobre diferentes eventos de formulario en jQuery y cómo validar formularios mediante un plugin jQuery.
