DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
26-07-2013

Una práctica crucial que hay que llevar a cabo de manera obligatoria cuando se realizan aplicaciones sobre todo las aplicaciones web, es la de validar los datos introducidos por el usuario tanto del lado del cliente como del lado del servidor; con el surgimiento de JavaScript es posible realizar validaciones del lado del cliente y de esta forma evitar múltiples llamadas al servidor saturar el mismo.

El problema de las validaciones con JavaScript nativo

Actualmente existen una gran cantidad de navegadores web cada uno de ellos con sus propias convenciones lo que dificulta las validaciones del lado del cliente a través de esta vía.

Framework JavaScript para la validación de datos

Existen una gran cantidad de librerías, framework o plugin desarrollados por terceros que realizan esta tarea de validar los datos de los usuario y muchos de ellos con soporte para navegadores web más utilizados; sin embargo esto trae como consecuencia la inclusión de archivos en la aplicación web y por ende aumentar el tiempo de carga del sitio para realizar una tarea tan sencilla como validar los datos.

Las validaciones de campos con HTML5 nativo

Con el surgimiento de la API de HTML5 es posible realizar las validaciones del lado del cliente que hemos venido hablando a lo largo de esta entrada con HTML a través de un atributo llamado pattern que forma parte de la API de HTML5; ya no es necesario realizar las validaciones con JavaScript o ningún plugin, librería o framework asociado sino a través de expresiones regulares establecidas como valores en el atributo pattern.

Este artículo NO...

... Tiene la intención enseñar Expresiones Regulares no mucho menos, para ellos hay una gran cantidad de información disponible en Internet; solo ejemplificamos el uso de este atributo a través de algunos ejemplos.

El atributo pattern en HTML5

El atributo pattern en HTML5 especifica una expresión regular usada para validar los campos de input; que pueden ser texto, búsqueda, url, teléfono, correo electrónico y contraseña.

Ejemplo de uso del atributo pattern para un campo de tipo tel

Ahora veremos un ejemplo en donde debemos ingresar un número telefónico con el siguiente formtaro: xxxx-xxxxxxx; es decir, los 4 dígitos del código del teléfono seguido de un guión y luego los 7 dígitos del número telefónico.

Intenta enviar el formulario con un patrón diferente al solicitado

<input type="tel" name="telefono" pattern="[0-9]{4}-[0-9]{7}" title="xxxx-xxxxxxx" />

En conclusión

Aunque actualmente puede no ser recomendable solamente realizar validaciones del lado del cliente a través del atributo pattern en HTML5 y esto se debe a que muchos navegadores aún no tienen un buen soporte a HTML5, esto deberá cambiar con el tiempo.

También la API de HTML5 trae consigo una gran cantidad de nuevos campos que de alguna manera realizan gran parte del trabajo incluyendo su propia especificación para una gran cantidad de formatos de datos como vimos en una entrada anterior llamada Nuevos campos de formularios en HTML5 (Guía rápida).


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Flat Module con puro CSS

Flat Module con puro CSS

Modelo de tarjetas con CSS

Modelo de tarjetas con CSS

Ondas con SVG y CSS

Ondas con SVG y CSS

Algunos artículos que te pueden interesar

Creando un input radio personalizado con solo CSS

Creando un input radio personalizado con solo CSS

Se explica cómo crear un input radio personalizado con solo CSS a través de un un indicador y animaciones y transiciones en CSS.

Andrés Cruz 23-05-2016

El elemento area y map en HTML

El elemento area y map en HTML

Con el elemento área es posible crear zonas clickeables dentro de una imagen; el elemento área debe de contener elementos hijos llamados map.

Andrés Cruz 26-11-2014

¿Cómo obtener por separado el canal RGB de una imagen con HTML5?

¿Cómo obtener por separado el canal RGB de una imagen con HTML5?

En este artículo veremos como obtener los tres canales RGB de una imagen y operarlos por separados.

Andrés Cruz 15-05-2014