¿Cómo mostrar manualmente un mensaje de validación HTML desde una función de JavaScript?

Quiero saber si hay alguna forma de mostrar mediante programación un error de validación de HTML, utilizando una función de JavaScript.

Esto es útil para escenarios en los que se debe verificar la duplicación de correo electrónico. Por ejemplo, una persona ingresa un correo electrónico, presiona el botón Enviar y luego debe recibir una notificación de que este correo electrónico ya está registrado o algo así.

Sé que hay otras formas de mostrar dicho error, pero quería mostrarlo de la misma manera que se muestran los mensajes de error de validación (por ejemplo, correo electrónico no válido, campo vacío, etc.).

JSFiddle: http://jsfiddle.net/ahmadka/tjXG3/

Formulario HTML:

<form>
    <input type="email" id="email" placeholder="Enter your email here..." required>
    <button type="submit">Submit</button>
</form>
    
<button id="triggerMsg" onclick="triggerCustomMsg()">Trigger Custom Message</button>

JavaScript:

function triggerCustomMsg()
{
    document.getElementById("email").setCustomValidity("This email is already used");
    
}

El código anterior establece el mensaje personalizado, pero no se muestra automáticamente. Solo se muestra cuando la persona presiona el botón de enviar o algo así.

Ahora puede usar el método HTMLFormElement.reportValidity(), actualmente está implementado en la mayoría de los navegadores excepto Internet Explorer (ver Compatibilidad del navegador en MDN). Informa errores de validez sin desencadenar el evento de envío y se muestran de la misma manera.

var applicationForm = document.getElementById("applicationForm");    
if (applicationForm.checkValidity()) {
  applicationForm.submit();
} else {
  applicationForm.reportValidity();
}

El método reportValidity() activará el mensaje de validación de HTML5.

Esta pregunta se hizo hace más de un año, pero también es una buena pregunta que encontré recientemente…

Mi solución fue usar JavaScript para crear un atributo (fui con “datos no válidos”) en el <label> de cada <input>, <select> y <textarea> que contiene el mensaje de validación.

Luego algo de CSS…

label:after {
    content: attr(data-invalid);
   ...
}

… muestra el mensaje de error.

Limitaciones

Esto solo funciona siempre que cada elemento tenga una etiqueta. No funcionará si coloca el atributo en el elemento en sí, porque <input> elementos no pueden tener :after pseudo elementos.

Manifestación

http://jsfiddle.net/u4ca6kvm/2/

Como mencionó @Diego, puede usar form.reportValidity();
Para admitir IE y Safari, incluya este polyfill, simplemente funciona:

if (!HTMLFormElement.prototype.reportValidity) {
    HTMLFormElement.prototype.reportValidity = function() {
      if (this.checkValidity()) return true;
      var btn = document.createElement('button');
      this.appendChild(btn);
      btn.click();
      this.removeChild(btn);
      return false;
    }
}