Hoy vamos a ver como se validan formularios solamente empleando html5, ya que entre sus bondades se encuentran esta opción con muchas facilidades para que nuestros formularios estén controlados desde el cliente.
Aun así no esta mal que haya otro control desde el servidor, como he explicado a lo largo del tema 6 de mi tutorial de PHP, donde se pueden tratar de muchas otras formas.
Pero vamos a lo importante en este articulo las validaciones en HTML5, supondremos que todos lo que nos encontramos leyendo estas líneas sabemos o tenemos nociones de html5.
Hasta la aparición de html5, la validación en cliente debía de hacer por código javascript, que da buenos resultados, pero ahora se puede hacer de forma mucho más sencilla directamente en el código html, con tan solo utilizar algunos atributos

type

required

<form>
 <p> Introduzca su nombre
 <input title="introduzca su nombre" type="text"  required></p>
 <p>
 <input type="submit" value="enviar">
</form>
</pre>
<div style="text-align: left;">
<br />
Que se ve así en los diferentes navegadores:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-Ccp8styhDfg/VEEuJgV4AvI/AAAAAAAABGQ/afglyg4vsi0/s1600/compa.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-Ccp8styhDfg/VEEuJgV4AvI/AAAAAAAABGQ/afglyg4vsi0/s1600/compa.png" height="138" width="640" /></a></div>
<br /></div>
<h2 style="text-align: left;">
<span style="color: orange;">pattern</span></h2>
<div style="text-align: left;">
Con este atributo es donde ya podemos especificarle a <b>html5 </b>como tiene que ser la entrada, ya que en su valor ponemos la expresión regular que deseemos y de ese modo podemos forzar a que la entrada del tipo que deseamos.</div>
<div style="text-align: left;">
Por ejemplo si queremos colocar un email que tenga su propia expresión regular (con solo poner una arroba se detecta como mail por defecto) debemos de hacer lo siguiente:</div>
<form>
 <p> Introduzca su nombre
 <input title="introduzca su nombre" type="text"  required></p>
 <p>Introduzca su email
 <input title="nombre@servidor.dominio" type="email" pattern="/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([.]\w+)*/" required></p>
 <input type="submit" value="enviar">
</form>

Hay que tener en cuenta que cuando hay un patern, el title sí es tomado en los tres navegadores, pudiendo mostrar de este modo el patron de ejemplo del input:

Es más, incluso si se pasa el ratón por encima del input, aparece un pequeño dialogo en los tres navegadores con el title.

¿Donde conseguir expresiones regulares?

Nota: el código del ejemplo solo muestra el formulario, pero esta dentro de un archivo html completo, enlazado a un archivo css.