Introducción a la validación de restricciones HTML5

Los sitios web interactivos y las aplicaciones no se pueden imaginar sin formularios que nos permitan conectar con nuestros usuarios, y para obtener los datos Necesitamos para asegurar transacciones sin problemas con ellos. Nosotros necesitamos entrada de usuario válida, Sin embargo, tenemos que adquirirlo de una manera que no frustra nuestros usuarios demasiado.

Si bien podemos mejorar la usabilidad de nuestros formularios con patrones de diseño de UX elegidos inteligentemente, HTML5 también tiene un mecanismo nativo para la validación de restricciones que nos permite captura de errores de entrada justo en el extremo delantero.

En este post, nos centraremos en validación de restricciones provista por el navegador, y mira cómo los desarrolladores frontend pueden entrada de usuario válida y segura utilizando HTML5.

Por qué necesitamos validación de entrada de front-end

Validación de entrada Tiene dos objetivos principales. El contenido que obtengamos debe ser:

1. Útil

Necesitamos Datos utilizables con los que podemos trabajar.. Necesitamos hacer que la gente entre Datos realistas en el formato correcto.. Por ejemplo, nadie que está vivo hoy nació hace 200 años. Obtener datos como este puede parecer divertido al principio, pero a largo plazo es molesto y llena nuestra base de datos con datos inútiles..

2. Asegurar

Al referirse a la seguridad, esto significa que necesitamos Prevenir la inyección de contenido malicioso. - Ya sea deliberado o por accidente.

Se puede lograr la utilidad (obtener datos razonables) solo del lado del cliente, El equipo backend no puede ayudar demasiado con esto. Para lograr seguridad, Los desarrolladores frontend y backend necesitan trabajar juntos.

Si los desarrolladores frontend validan correctamente la entrada en el lado del cliente, el El equipo de back-end tendrá que lidiar con muchas menos vulnerabilidades.. El hacking (un sitio) a menudo implica enviar datos adicionales, o datos en el formato incorrecto. Los desarrolladores pueden luchar contra los agujeros de seguridad como estos, luchar con éxito desde la interfaz de usuario.

Por ejemplo, esta guía de seguridad de PHP recomienda verificar todo lo que podamos en el lado del cliente. Enfatizan la importancia de la validación de entrada de frontend al dar muchos ejemplos, tales como:

"La validación de entrada funciona mejor con valores extremadamente restringidos, por ejemplo, cuando algo debe ser un número entero, una cadena alfanumérica o una URL HTTP".

En la validación de entrada de frontend, nuestro trabajo es imponer restricciones razonables en la entrada del usuario. La función de validación de restricciones de HTML5 nos proporciona los medios para hacerlo.

Validación de restricciones HTML5

Antes de HTML5, los desarrolladores frontend estaban limitados a validando la entrada del usuario con JavaScript, que fue un proceso tedioso y propenso a errores. Para mejorar la validación de formularios del lado del cliente, HTML5 ha introducido una validación de restricciones algoritmo que se ejecuta en los navegadores modernos, y comprueba la validez de la entrada enviada.

Para realizar la evaluación, el algoritmo utiliza el atributos de elementos de entrada relacionados con la validación, como , </code>, y <code><select></code>. Si desea saber cómo se realiza la validación de restricciones paso a paso en el navegador, consulte este documento de WhatWG.</p> <p>Gracias a la función de validación de restricciones de HTML5, podemos ejecutar todo <strong>tareas de validación de entrada estándar</strong> en el lado del cliente <strong>sin JavaScript, únicamente con HTML5</strong>.</p> <p>Para realizar tareas más complejas relacionadas con la validación, HTML5 nos proporciona una <strong>API de JavaScript de validación de restricciones</strong> Podemos utilizar para configurar nuestros scripts de validación personalizados..</p> <h4>Validar con tipos de entrada semántica</h4> <p>HTML5 ha introducido <strong>tipos de entrada semántica</strong> que, además de indicar el significado del elemento para los agentes de usuario, también se puede utilizar para <strong>validar la entrada del usuario</strong> Al limitar a los usuarios a un determinado formato de entrada.</p> <p>Además de los tipos de entrada que ya existían antes de HTML5 (<code>texto</code>, <code>contraseña</code>, <code>enviar</code>, <code>Reiniciar</code>, <code>radio</code>, <code>caja</code>, <code>botón</code>, <code>oculto</code>), también podemos utilizar los siguientes <strong>tipos de entrada semántica de HTML5</strong>: <code>correo electrónico</code>,<code>tel</code>,<code>url</code>,<code>número</code>,<code>hora</code>,<code>fecha</code>,<code>fecha y hora</code>,<code>datetime-local</code>, <code>mes</code>,<code>semana</code>, <code>distancia</code>, <code>buscar</code>,<code>color</code>.</p> <p>Podemos usar de forma segura los tipos de entrada HTML5 con navegadores antiguos, ya que se comportarán como un <code><input type="text"></code> campo en los navegadores que no los admiten.</p> <p>Veamos qué sucede cuando el usuario ingresa el tipo de entrada incorrecto. Digamos que hemos creado un campo de entrada de correo electrónico con el siguiente código:</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">Tu correo electrónico:</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>Cuando el usuario escribe una cadena que no usa un formato de correo electrónico, el algoritmo de validación de restricciones <strong>no envía el formulario</strong>, y <strong>devuelve un mensaje de error</strong>:</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>La misma regla se aplica también a otros tipos de entrada, por ejemplo para <code>type = "url"</code> los usuarios solo pueden enviar una entrada que siga el formato de URL (comienza con un protocolo, como <code>http: //</code> o <code>ftp: //</code>).</p> <p>Algunos tipos de entrada utilizan un diseño que <strong>Ni siquiera permite a los usuarios ingresar un formato de entrada incorrecto</strong>, por ejemplo <code>color</code> y <code>distancia</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">Color de fondo:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>Si usamos el <code>color</code> tipo de entrada, el usuario está limitado a elegir un color del selector de colores o quedarse con el negro predeterminado. El campo de entrada es <strong>limitado por el diseño</strong>, por lo tanto, no deja muchas posibilidades de error de usuario.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>Cuando sea apropiado, vale la pena considerar usar el <code><select></code> Etiqueta HTML que funciona de manera similar a estos tipos de entrada restringida por diseño; permite a los usuarios elegir de una lista desplegable.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">Su fruta favorita:</label> <select name="fruit"> <option value="apple">manzana</option> <option value="pear">Pera</option> <option value="orange">naranja</option> <option value="raspberry">Frambuesa</option> </select> <input type="submit" value="Submit"> </form> </pre> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_3.jpg"></figure><h4>Usar los atributos de validación de HTML5</h4> <p>El uso de tipos de entrada semánticos establece ciertas restricciones sobre lo que los usuarios pueden enviar, pero en muchos casos queremos ir un poco más lejos. Esto es cuando el <strong>atributos relacionados con la validación</strong> del <code><input></code> la etiqueta nos puede ayudar.</p> <p>Los atributos relacionados con la validación pertenecen a ciertos tipos de entrada (no se pueden usar en <em>todos</em> tipos) sobre los que imponen más restricciones.</p> <h5>1. <code>necesario</code> Para obtener una entrada válida por todos los medios.</h5> <p>los <code>necesario</code> atributo es el atributo de validación HTML más conocido. Es un <strong>atributo booleano</strong> lo que significa que <strong>no toma ningún valor</strong>, simplemente tenemos que colocarlo dentro de la <code><input></code> Etiqueta si queremos usarlo:</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>Si el usuario se olvida de ingresar un valor en un campo de entrada requerido, el navegador <strong>devuelve un mensaje de error</strong> que les advierte a rellenar el campo, y ellos <strong>no puedo enviar el formulario</strong> Hasta que hayan proporcionado una entrada válida. Por eso es importante siempre. <strong>marcar visualmente</strong> campos obligatorios para los usuarios.</p> <p>los <code>necesario</code> atributo puede ser <strong>utilizado junto con los siguientes tipos de entrada</strong>: <code>texto</code>, <code>buscar</code>, <code>url</code>, <code>tel</code>, <code>correo electrónico</code>, <code>contraseña</code>, <code>fecha</code>, <code>fecha y hora</code>, <code>datetime-local</code>, <code>mes</code>, <code>semana</code>,<code>hora</code>, <code>número</code>, <code>caja</code>, <code>radio</code>, <code>expediente</code>, más con el <code><textarea></code>y <code><select></code> Etiquetas HTML.</p> <h5>2. <code>min</code>, <code>max</code> y <code>paso</code> para validación de números</h5> <p>los <code>min</code>, <code>max</code> y <code>paso</code> los atributos nos permiten <strong>poner restricciones en los campos de entrada de números</strong>. Se pueden utilizar junto con el <code>distancia</code>, <code>número</code>, <code>fecha</code>, <code>mes</code>, <code>semana</code>, <code>fecha y hora</code>, <code>datetime-local</code>, y <code>hora</code> tipos de entrada.</p> <p>los <code>min</code> y <code>max</code> atributos proporcionan una gran manera de fácilmente <strong>excluir datos no razonables</strong>. Por ejemplo, el siguiente ejemplo obliga a los usuarios a enviar una edad entre 18 y 120 años..</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">Tu edad:</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>Cuando el algoritmo de validación de restricciones se topa con una entrada de usuario más pequeña que la <code>min</code>, o más grande que el <code>max</code> valor, evita que llegue al servidor y devuelve un mensaje de error.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p>los <code>paso</code> atributo <strong>especifica un intervalo numérico</strong> entre los valores legales de un campo de entrada numérico. Por ejemplo, si queremos que los usuarios elijan solo entre los años bisiestos, podemos agregar el <code>paso = "4"</code> atribuir al campo. En el siguiente ejemplo utilicé el <code>número</code> tipo de entrada, ya que no hay <code>type = "año"</code> en HTML5.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">Su año bisiesto favorito:</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>Con las restricciones preestablecidas, los usuarios solo pueden elegir entre años bisiestos entre 1972 y 2016 si usan la pequeña flecha hacia arriba que viene con el <code>número</code> tipo de entrada. También pueden escribir un valor manualmente en el campo de entrada, pero en caso de que no cumpla con las restricciones, el navegador mostrará un mensaje de error..</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>longitud máxima</code> para validación de longitud de texto</h5> <p>los <code>longitud máxima</code> atributo hace posible <strong>establecer una longitud máxima de caracteres</strong> para los campos de entrada de texto. Se puede utilizar junto con el <code>texto</code>, <code>buscar</code>, <code>url</code>, <code>tel</code>, <code>correo electrónico</code> y <code>contraseña</code> tipos de entrada, y con el <code><textarea></code> Etiqueta HTML.</p> <p>los <code>longitud máxima</code> atributo puede ser una excelente solución para campos de números de teléfono que no pueden tener más de un cierto número de caracteres, o para formularios de contacto donde no queremos que los usuarios escriban más de una cierta longitud.</p> <p>El siguiente fragmento de código muestra un ejemplo para este último, limita los mensajes de usuario a 500 caracteres. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">Mensaje (máximo 500 caracteres):</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

los longitud máxima atributo no devuelve un mensaje de error, pero el navegador simplemente no permite que los usuarios escriban más que el número de caracteres especificado. Por eso es crucial para informar a los usuarios sobre la restricción, de lo contrario no entenderán por qué no pueden continuar con la escritura.

 4. modelo para la validación de Regex
 los modelo atributo nos permite usar expresiones regulares en nuestro proceso de validación de entrada. Una expresión regular es una conjunto de caracteres predefinidos que forman un cierto patrón. Podemos usarlo para buscar cadenas que siguen el patrón, o para imponer un cierto formato definido por el patrón.
 Con el modelo Atributo que podemos hacer lo último: obliga a los usuarios a enviar sus comentarios en un formato que coincide con la expresión regular dada.
  los modelo El atributo tiene muchos casos de uso, pero puede ser especialmente útil cuando queremos validar un campo de contraseña.
 El siguiente ejemplo requiere que los usuarios ingresen una contraseña que tenga un mínimo de 8 caracteres y que contenga al menos una letra y un número (fuente de la expresión regular que utilicé). 
   * Tu contraseña:   
 
 Algunas cosas mas
 En este artículo, echamos un vistazo a cómo hacer uso de la validación del formulario provisto por el navegador proporcionado por el algoritmo nativo de validación de restricciones HTML5. Para crear nuestros scripts de validación personalizados, necesitamos usar la API de Validación de Restricciones, que puede ser el próximo paso para perfeccionar las habilidades de validación de formularios..
 Los formularios HTML5 son accesibles mediante tecnologías de asistencia, por lo que no necesariamente tenemos que usar el aria-required Atributo ARIA para marcar los campos de entrada requeridos para lectores de pantalla. Sin embargo, todavía puede ser útil agregar soporte de accesibilidad para navegadores más antiguos. También es posible optar por la validación de restricciones añadiendo el novalidate atributo booleano al 
 elemento.