Wie kann man manuell eine HTML5-Validierungsnachricht von einer JavaScript-Funktion anzeigen?

Ich möchte wissen, ob es eine Möglichkeit gibt, einen HTML5-Validierungsfehler mithilfe einer JavaScript-Funktion programmgesteuert anzuzeigen.

Dies ist nützlich für Szenarien, in denen die E-Mail-Duplizierung überprüft werden muss. Zum Beispiel gibt eine Person eine E-Mail ein, drückt auf die Schaltfläche Senden und muss dann benachrichtigt werden, dass diese E-Mail bereits registriert ist oder so.

Ich weiß, dass es andere Möglichkeiten gibt, einen solchen Fehler anzuzeigen, aber ich wollte ihn auf die gleiche Weise anzeigen, wie die Validierungsfehlermeldungen angezeigt werden (z. B. ungültige E-Mail, leeres Feld usw.).

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

HTML-Formular:

<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");

}

Der obige Code legt die benutzerdefinierte Nachricht fest, wird jedoch nicht automatisch angezeigt. Es wird nur angezeigt, wenn die Person auf die Schaltfläche “Senden” oder so etwas drückt.

Sie können jetzt die Methode HTMLFormElement.reportValidity() verwenden, die derzeit in den meisten Browsern außer Internet Explorer implementiert ist (siehe Browser-Kompatibilität bei MDN). Es meldet Gültigkeitsfehler, ohne das Submit-Ereignis auszulösen, und sie werden auf die gleiche Weise angezeigt.

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

Die Methode reportValidity() löst eine HTML5-Validierungsnachricht aus.

Diese Frage wurde vor über einem Jahr gestellt, aber es ist eine gute Frage, der ich kürzlich auch begegnet bin …

Meine Lösung bestand darin, JavaScript zu verwenden, um ein Attribut (ich ging mit “data-invalid”) auf dem zu erstellen <label> von jedem <input>, <select> und <textarea> enthält die Validierungsnachricht.

Dann etwas CSS…

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

… zeigt die Fehlermeldung an.

Einschränkungen

Dies funktioniert nur, wenn jedes Element ein Label hat. Es funktioniert nicht, wenn Sie das Attribut auf das Element selbst setzen, weil <input> Elemente können nicht haben :after Pseudo-Elemente.

Demo

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

Wie von @Diego erwähnt, können Sie form.reportValidity();
Um IE und Safari zu unterstützen, fügen Sie dieses Polyfill hinzu, es funktioniert einfach:

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;
    }
}