Validar formularios con HTML5 CSS3 y JavaScript

Para ver en youtube clic aquí
Para ir a mi canal de youtube clic aquí (No olvides suscribirte)
Para ir al canal de  Developero clic aquí

Descargar plantilla HTML

Puedes empezar el tutorial con el mismo html que yo utilicé aunque da igual si utilizas un formulario creado por tí

http://adf.ly/1dAUFG  (Lee la aclaratoria sobre los enlaces al final de la entrada)

 Si solo quieres las imágenes que yo utilicé las puedes descargar en el siguiente enlace:

http://adf.ly/1dAUJB (Lee la aclaratoria sobre los enlaces al final de la entrada)

La importancia de la validación

    La validación no es más que la verificación de los datos antes de que estos puedan ser procesados por nuestro servidor. 

  Existe un tipo de ataque conocido como Inyección SQL que consiste en enviar código malicioso a través de los formularios, más información sobre este tipo de ataque puedes ver el siguiente enlace:

http://adf.ly/1dAP3c  (Leer aclaratoria sobre los enlaces abajo)

  La verificación más importante que debemos hacer consiste en evitar que un atacante pueda ingresar Javascript o SQL a través de nuestros formularios, también en evitar que se envíen espacios en blanco para que nuestra base de datos no se llene de datos basura

La diferencia entre el servidor y el cliente

   En el cliente, la validación ocurre en el navegador mismo, por lo tanto se lleva a cabo usando herramientas disponibles en el navegador, como por ejemplo HTML5 CSS3 y JavaScript.

En el servidor, la validación ocurre una vez que la información ha sido enviada a este a través de un formulario, esta se lleva a cabo con tecnologías disponibles en el servidor como PHP JSP Node.JS ASP etc

Como escribir patrones para el atributo "pattern"

 Las llaves [ ]

 Indican que caracteres debemos colocar, a continuación unos ejemplos :

• [abc] Solo se puede escribir "a","b" o "c" puede ser por ejemplo: "ccc", "bbb", "aaa" o cualquier combinación que solo tenga una de las tres letras
• [^abc] Al colocar el "acento circunflejo" (Es el nombre de ese signo) estamos pidiendo que se permita cualquier carácter excepto "a", "b" o "c", esto significa que se van a admitir, números, caracteres especiales y letras, siempre y cuando estas últimas no sean una de esas tres
• [a-z], [0-9] o [A-Z] Con el guión podemos especificar un rango de caracteres, en el primer caso cualquier letra que vaya de la "a" hasta la "z" en minúscula, estos se pueden combinar sin necesidad de espacios de la siguiente forma: [a-zA-Z0-9]
• [\s] o [\n] De igual forma que hicimos en el primer ejemplo podemos especificar estos caracteres para pedir que se solicite un espacio en blanco o una nueva linea respectivamente
• \ El "slash invertido" lo usamos para poder identificar caracteres especiales por ejmplo si queremos solicitar que se coloquen guiones [\-] si se colocara el guión solamente pudiera causar conflicto ya que como vimos arriba este se usa para denotar rangos
• \d Cualquier número, en este caso no es necesario colocar las llaves ([])
• \D Cualquier letra o carácter especial, la igual que arriba no es necesario colocar as llaves

Los corchetes { }

  Indican la cantidad de caracteres que debemos colocar:

• {7} Aquí exigimos 7 caracteres obligatoriamente, ni mas ni menos
• {2,9} Siempre tiene que haber como mínimo 2 y no más de 9

En resumen, con la coma (,) creamos rangos para cantidad y con el guión (-) creamos rangos para el tipo de carácter

Ejemplos de patrones

Código postal Venezolano : Deben ser 4 números entre 0 y 9

[0-9]{4}

Código postal Mexicano : Contiene 5 dígitos 4 números agrupados de dos en dos y separados por un guión

[0-9]{2}[\-]{1}[0-9]{2} o también    \d{2}[\-]\d{2}

Número de teléfono formato USA internacional : debe ser algo así +99(99)9999-9999

[\+]\d{2}[\(]{1}\d{2}[\)]\d{4}[\-]{1}\d{4}

También cuando queramos un solo carácter no hace falta que especifiquemos el {1} por lo que lo de arriba puede quedar de forma más corta de la siguiente manera:

 [\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}

Fecha formato dd/mm/aa: 

\d{2}[/]\d{2}[/]\d{2}

Más información sobre los patrones

  A continuación comparto contigo una enlace a un sitio web que contiene una lista grande de patrones ya creados que puedes usar, adicionalmente te permite crear tus propios patrones de forma muy sencilla, el único problema es que este sitio está en inglés:

http://adf.ly/1dASXo  (Lee la aclaratoria sobre los enlaces al final de la entrada)

Códigos fuente

 En el enlace a continuación puedes descargar el formulario ya terminado, para que leas y compares el código fuente que yo escribí:

http://adf.ly/1dAUNf  (Lee la aclaratoria sobre los enlaces al final de la entrada)

Aclaratoria sobre los enlaces

  Los enlaces en este blog tienen un pequeño anuncio publicitario patrocinado por Adfly, luego de hacer clic esperas unos segundos y aparecerá un botón con el texto "Saltar publicidad" debes hacer clic ahí para llegar a la página de destino. Este patrocinio me permite producir más material como este, si te parece que los anuncios son incómodos o no llevan la página de destino escríbeme inmediatamente, puedes hacer un comentario aquí o en mi canal de Youtube