MANUALES (Continuación) :

AÑADIENDO ESTILO CON FONT AWESOME

Las webfonts, nos permiten incluir diseño gráfico de forma muy sencilla, fácilmente reutilizables y con una muy baja penalización en el rendimiento web.

Nuevamente voy a volver a utilizar CSS y Font Awesome para incluir algo más vistoso en la validación. Para ello incluyo en el header la página un link a Font Awesome.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

A continuación incluyo el siguiente código HTML después de cada input, con el icono check que me proporciona Font Awesome.

<i class="fa fa-check check-ok"></i>

Incluir las siguientes lineas CSS que me permiten por medio del selector de siblings (hermanos o parientes) mostrar el check cuando el contenido del input sea válido u ocultarlo cuando no.

.check-ok { color: lime; }   input:invalid ~ .check-ok { display: none; }   input:valid ~ .check-ok { display: inline; }

Muestra además un check al lado del campo en cuanto los datos introducidos sean válidos.

TOMADO DE: 

https://oscargascon.es/validacion-de-formularios-con-html5-y-expresiones-regulares-sin-uso-de-js-utilizacion-de-css-y-fontawesome-para-mostrar-campos-validos-en-formularios/