HTML5-Formular-Attribut erforderlich. Benutzerdefinierte Validierungsmeldung festlegen?

Question

Ich habe das folgende HTML5-Formular: http://jsfiddle.net/nfgfP/

<form id="form" onsubmit="return(login())">
<input name="username" placeholder="Username" required />
<input name="pass"  type="password" placeholder="Password" required/>
<br/>Remember me: <input type="checkbox" name="remember" value="true" /><br/>
<input type="submit" name="submit" value="Log In"/>

Wenn ich derzeit die Eingabetaste drücke und beide Felder leer sind, erscheint ein Popup-Fenster mit der Meldung "Bitte füllen Sie dieses Feld aus". Wie kann ich diese Standardmeldung in "Dieses Feld kann nicht leer gelassen werden" ändern?

EDITAR: Beachten Sie auch, dass die Fehlermeldung für das Feld type password einfach lautet ***** . Um dies neu zu erstellen, geben Sie dem Benutzernamen einen Wert und klicken Sie auf Senden.

EDITAR : Ich verwende Chrome 10 zum Testen. Bitte tun Sie das Gleiche

Answer 1

Hier ist der Code für die Behandlung benutzerdefinierter Fehlermeldungen in HTML5:

<input type="text" id="username" required placeholder="Enter Name"
  oninvalid="this.setCustomValidity('Enter User Name Here')"
  oninput="this.setCustomValidity('')"/>

Dieser Teil ist wichtig, weil er die Fehlermeldung ausblendet, wenn der Benutzer neue Daten eingibt:

oninput="this.setCustomValidity('')"

Answer 2

Verwenden Sie [setCustomValidity](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Constraint_API%27s_element.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("");
        };
    }
})

I geändert zu Vanilla JavaScript von Mootools, wie vorgeschlagen von @itpastorn in den Kommentaren, aber Sie sollten in der Lage sein, das Mootools-Äquivalent zu berechnen, falls nötig.

Editar

Ich habe den Code hier aktualisiert als setCustomValidity funktioniert etwas anders, als ich es bei meiner ursprünglichen Antwort verstanden habe. Wenn setCustomValidity auf einen anderen Wert als die leere Zeichenkette gesetzt ist, wird das Feld als ungültig angesehen; daher müssen Sie es vor dem Testen der Gültigkeit löschen, Sie können es nicht einfach setzen und vergessen.

Weiter bearbeiten

Wie im Kommentar von @thomasvdb unten erwähnt, müssen Sie die benutzerdefinierte Gültigkeit in einem Ereignis außerhalb von invalid andernfalls kann es zu einem zusätzlichen Durchlauf durch die oninvalid Handler, um sie zu löschen.

Answer 3

Es ist sehr einfach, benutzerdefinierte Nachrichten mit Hilfe von HTML5 Veranstaltung oninvalid

Hier ist der Code:

<input id="UserID"  type="text" required="required"
       oninvalid="this.setCustomValidity('Witinnovation')"
       onvalid="this.setCustomValidity('')">

Dies ist sehr wichtig:

onvalid="this.setCustomValidity('')"

Answer 4

Nota: Dies funktioniert nicht mehr in Chrome, nicht in anderen Browsern getestet. Siehe Änderungen unten. Diese Antwort wird hier als historische Referenz belassen.

Wenn Sie der Meinung sind, dass die Validierungszeichenfolge nicht per Code festgelegt werden sollte, können Sie das title-Attribut des Eingabeelements so einstellen, dass es "Dieses Feld kann nicht leer gelassen werden" lautet. (Funktioniert in Chrome 10)

title="This field should not be left blank."

Véase http://jsfiddle.net/kaleb/nfgfP/8/

Und in Firefox können Sie dieses Attribut hinzufügen:

x-moz-errormessage="This field should not be left blank."

Editar

Das scheint sich geändert zu haben, seit ich diese Antwort geschrieben habe. Das Hinzufügen eines Titels ändert nicht mehr die Gültigkeitsmeldung, sondern fügt der Meldung lediglich einen Zusatz hinzu. Die obige Fiddle gilt immer noch.

Bearbeiten 2

Chrome macht seit Chrome 51 nichts mehr mit dem title-Attribut. Ich bin nicht sicher, in welcher Version sich das geändert hat.

Answer 5

Es ist sehr einfach, benutzerdefinierte Nachrichten mit Hilfe der HTML5 oninvalid Veranstaltung

Hier ist der Code:

User ID 
<input id="UserID"  type="text" required 
       oninvalid="this.setCustomValidity('User ID is a must')">