Solución:
Aquí está el código para manejar el mensaje de error personalizado en HTML5:
<input type="text" id="username" required placeholder="Enter Name"
oninvalid="this.setCustomValidity('Enter User Name Here')"
oninput="this.setCustomValidity('')"/>
Esta parte es importante porque oculta el mensaje de error cuando el usuario ingresa nuevos datos:
oninput="this.setCustomValidity('')"
Usar setCustomValidity:
document.addEventListener("DOMContentLoaded", function() {
var elements = document.getElementsByTagName("INPUT");
for (var i = 0; i < elements.length; i++) {
elements[i].oninvalid = function(e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
e.target.setCustomValidity("This field cannot be left blank");
}
};
elements[i].oninput = function(e) {
e.target.setCustomValidity("");
};
}
})
Cambié a JavaScript vainilla de Mootools como lo sugirió @itpastorn en los comentarios, pero debería poder calcular el equivalente de Mootools si es necesario.
Editar
He actualizado el código aquí como setCustomValidity funciona de forma ligeramente diferente a lo que entendí cuando respondí originalmente. Si setCustomValidity se establece en cualquier otra cosa que no sea la cadena vacía, hará que el campo se considere inválido; por lo tanto, debe borrarlo antes de probar la validez, no puede simplemente configurarlo y olvidarlo.
Edición adicional
Como se señala en el comentario de @ thomasvdb a continuación, debe borrar la validez personalizada en algún evento fuera de invalid de lo contrario, puede haber un paso adicional a través del oninvalid manejador para borrarlo.
Es muy sencillo controlar los mensajes personalizados con la ayuda de HTML5 evento oninvalid
Aquí está el código:
<input id="UserID" type="text" required="required"
oninvalid="this.setCustomValidity('Witinnovation')"
onvalid="this.setCustomValidity('')">
Esto es lo más importante:
onvalid="this.setCustomValidity('')"