Validar campos vacios haciendo uso de html 5 (required)

En el post pasado mostré la manera de como se haría un login, he mejorado un poco dicho login haciendo un agregado, esto consiste en validar si determinado campo contiene texto esto se logra atravez de el atributo required que implementa Html5.

Al incluir el atributo required dentro de una etiqueta <input>, automáticamente se hace obligatorio su llenado por ser un atributo tipo booleano, otro de los atributos incluidos en esta etiqueta es title que muestra texto debajo de la ventana emergente producto de el atributo required y esto se hace de la siguiente manera :

UserName :  
Password :  

Sólo basta con escribir required dentro de la etiqueta <input> y automáticamente al precionar el botón si alguno de estos campos no contiene texto, será imposible que realice la siguiente tarea, el resultado es muy parecido al siguiente :

En la primer imágen se denota el uso de la propiedad title que muestra un mensaje cuando el mouse es colocado sobre determinado elemento y para la segunda se hace uso de required, pues se precionó el botón manteniedo ambos campo vacíos.