Con la llegada del conjunto de especificaciones y tecnologías que componen el actual HTML5, ahora es posible validar de forma fácil y elegante los formularios de nuestra web.

El atributo «required»
Al incluir el atributo required dentro de un elemento <input type=»text» />, se hace obligatoria su entrada de datos en el formulario.

<input name="nombre" required="" type="text" />

En el momento en que se encuentra un error de validación se ejecuta la acción por defecto del navegador, que no es mas que aplicar la pseudo clase invalid de css.
De este modo hacemos que el cuadro aparezca con borde rojo por ejemplo…

Añadiendo el atributo title en la etiqueta <input type=»text» />, se puede extender la información mostrada.

<input title="Se necesita un nombre" name="nombre" required="" type="text" />

Otra característica es el añadido al contenido predeterminado en los campos de entrada de texto que ayudan al usuario a la hora de introducir datos:

<input name="TCredito" pattern="[0-9]{13,16}" required="" type="text" placeholder="Número de Tarjeta de Crédito" />

El atributo «pattern» y los tipos de <input type=»text» />

Utilizando el atributo pattern se verifica el formato del valor, la longitud o tipo.
Chrome, Firefox, Opera 9.5+, Safari 5+, Internet Explorer 10 son los únicos navegadores que soportan el atributo pattern en la actualidad.
Se logra definiendo un patrón con expresiones regulares.

<input name="TCredito" pattern="[0-9]{13,16}" required="" type="text" />

La pseudo clase: invalid de CSS3
La pseudo clase invalid representa cualquier campo invalido que sea resultado de una validación, al contrario de la subclase valid.
Si un campo contiene un valor inválido se aplica la clase invalid  ayudando al usuario a identificar los campos que necesitan ser verificados.

input:invalid {

border: 1px solid red;
}


/* Estilo por defecto */

input:valid {
border: 1px solid green;
}

/* Estilo por defecto */

input:required:invalid {
border: 1px solid red;
}

input:required:valid {
border: 1px solid green;
}

Otro caso son los elementos de formulario adicionales del HTML5, que incluye su propio patron de validación  pattern

<input type="number">
 <input type="range">
 <input type="date" … >
 <input type="time" … >
 <input type="color">
 <input type="search">
 <input type="tel">
 <input type="email">
 <input type="url">

http://html5facil.com/tutoriales/validacion-formularios-nativos-html5/
 http://html5pattern.com/
 https://www.w3.org/community/webed/wiki/Es/Elementos_de_formulario_adicionales_del_HTML5