Validar formularios con HTML5

Como muchos de vosotros ya sabréis, HTML5 ha aportado nuevas características de validación de formularios con el atributo required de los elementos <input>. Sin embargo sigue siendo necesario realizar la validación clásica ya que ciertos navegadores como Internet Explorer 9 y anteriores y Safari no soportan dicho atributo.

El primer paso que debemos dar sería indicar que un elemento es obligatorio de la siguiente forma:

Con esto conseguiremos que simplemente nos aparezca un mensaje genérico por parte del navegador. Si queremos personalizar dicho mensaje usaremos el atributo title:

Si queremos ir más allá y validar que lo que escribamos en el email tenga un formato correcto añadiremos el atributo pattern:

Con esto ya hemos conseguido validar el formato y mostrar un mensaje personlizado, pero podemos hacérselo un poco más fácil al usuario que debe introducir su email escribiéndole por defecto el formato dentro del mismo texto con el atributo placeholder:

Fuentes:

http://www.w3schools.com/tags/att_input_required.asp