Wie zeige ich manuell eine HTML5-Validierungsnachricht von einer JavaScript-Funktion an?

Question

Ich möchte wissen, ob es eine Möglichkeit gibt, einen HTML5-Validierungsfehler mithilfe einer JavaScript-Funktion programmatisch 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 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 genauso anzeigen, wie die Validierungsfehlermeldungen angezeigt werden (z. B. ungültige E-Mail, leeres Feld usw.).

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

HTML Form:

<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 wird die benutzerdefinierte Nachricht, aber es ist nicht automatisch angezeigt. Es wird nur angezeigt, wenn die Person den Senden-Button drückt oder etwas.

Answer 1

Diese Frage vor über ein Jahr gefragt wurde, aber es ist eine gute Frage, die ich vor kurzem auch angetroffen ...

Meine Lösung war, JavaScript zu verwenden, um ein Attribut zu erstellen (Ich ging mit „Daten-ungültig“) über die <label> von jedem <input>, <select> und <textarea>, die validationMessage enthalten.

Dann einige CSS ...

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

... zeigt die Fehlermeldung.

Einschränkungen

dies nur jedes Element vorgesehen Werke hat ein Etikett. Es wird nicht funktionieren, wenn Sie das Attribut auf das Element selbst setzen, weil <input> Elemente :after Pseudoelemente nicht haben können.

Demo

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

Answer 2

Sie jetzt die HTMLFormElement.reportValidity() -Methode zur Zeit verwendet, kann es in Chrome implementiert ist, Firefox, Opera und Android-Browser, aber noch nicht im Internet Explorer oder Safari (siehe Browser compatibility bei MDN). Es meldet Gültigkeitsfehler, ohne das Submit-Ereignis auszulösen, und sie werden auf die gleiche Weise angezeigt.

Answer 3

Wie von @Diego bezeichnet, können Sie form.reportValidity();
Um IE und Safari um diesen polyfill zu unterstützen, 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; 
    } 
}