Patrones en formularios con HTML5 pattern

Para realizar la validación de un formulario de lado del cliente siempre recurríamos a scripts en JavaScript o usar alguna librería para verificar que los inputs sean los correctos, que estén completos con datos antes de que el formulario sea enviado. En HTML5 tenemos la posibilidad de aplicar patrones con HTML5 pattern.

En el nuevo estándar de HTML5, nuevos atributos de los input como required y pattern usados en combinación con CSS selectors nos facilita la tarea y mejora la interfaz de aviso al usuario.

Atributo HTML5 pattern

El atributo HTML5 pattern especifica una expresión regular usada para validar los valores del elemento input.

Este atributo funciona con los tipos de entrada input siguientes: texto, búsqueda, url, teléfono, correo electrónico y contraseña.

Usar el atributo de “title” para describir el HTML5 pattern para ayudar al usuario.

Ejemplo de uso de HTML5 pattern

Digamos que necesitamos que el input tenga el siguiente formato: Las primeras 3 letras del nombre de tu país. El uso de required y pattern nos asegura que el input debe ser completado y siguiendo la expresión regular. Al pararse el usuario sobre el input, el mensaje en el atributo title es mostrado, lo cual ayuda a darle una pista al usuario de cómo debe llenar el formulario.

<form>
  <label for="country">País:</label>
  <input type="text"
         id="country"
         name="country_code"
         pattern="[A-Za-z]{3}"
         title="Tres letras del código del país"
         required>
  <input type="submit">
</form>

Puedes encontrar una gran cantidad de patrones en la web HTML5 Pattern.