Wenn ich derzeit die Eingabetaste drücke, wenn beide leer sind, wird ein Popup-Fenster mit der Aufschrift “Bitte füllen Sie dieses Feld aus” angezeigt. Wie würde ich diese Standardnachricht in “Dieses Feld darf nicht leer bleiben” ändern?
Die Fehlermeldung des Typkennwortfelds ist einfach *****. Um dies neu zu erstellen, geben Sie dem Benutzernamen einen Wert und klicken Sie auf „Senden“.
Warum akzeptieren Sie nicht einfach die Standardnachricht des Browsers? Das ist es, was Benutzer für jede andere Website sehen, die sie besuchen. Sie verwirren Ihre Benutzer nur, indem Sie eine nicht standardmäßige Nachricht erstellen. (Google hat wahrscheinlich mehr UX-Evaluierung und -Tests durchgeführt, um diesen Wortlaut zu bestimmen, als Sie!).
– ChrisV
4. Dezember 2011 um 15:27 Uhr
@ChrisV Was ist mit mehrsprachigen Websites?
– inemanja
26. November 2013 um 11:22 Uhr
In meinem Fall möchte ich vor dem Posten überprüfen, ob der Wert eine Zahl ist, aber ich kann das Attribut type=”number” (aus Gründen) nicht verwenden. Also setze ich das Musterattribut so, dass es nach Zahlen und optionalen Dezimalstellen sucht, die die Nachricht liefern , „Bitte passen Sie das angeforderte Format an“, bei einem Fehler. Ich würde lieber sagen: “Du musst uns eine Nummer bucko schenken.”
– Kristopher
29. März 2017 um 14:58 Uhr
Somnath Kadam
Hier ist ein Code zum Anzeigen einer benutzerdefinierten Fehlermeldung:
<input type="text" id="username" required placeholder="Enter Name"
oninvalid="ths.setCustomValidity('Enter User Name Here')"
oninput="setCustomValidity('')"/>
Dieser Teil ist wichtig, weil er die Fehlermeldung verbirgt, wenn der Benutzer neue Daten eingibt:
oninput="setCustomValidity('')"
Beachten Sie das this Das Schlüsselwort ist für Inline-Event-Handler nicht erforderlich, aber Sie möchten es aus Konsistenzgründen trotzdem verwenden.
Beachten Sie, dass Sie das sogar weglassen können this. in diesem Fall, weil Inline-Ereignishandler mit a ausgeführt werden with(this) (sagt nicht, dass du solltest)
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("");
};
}
})
ICH in Vanille-JavaScript geändert von Mootools, wie von @itpastorn in den Kommentaren vorgeschlagen, aber Sie sollten in der Lage sein, bei Bedarf das Mootools-Äquivalent zu ermitteln.
Wenn setCustomValidity auf etwas anderes als die leere Zeichenfolge gesetzt ist, wird das Feld als ungültig betrachtet; Daher müssen Sie es löschen, bevor Sie die Gültigkeit testen. Sie können es nicht einfach festlegen und vergessen.
Wie im Kommentar von @thomasvdb unten erwähnt, müssen Sie die benutzerdefinierte Gültigkeit in einigen Fällen außerhalb von löschen invalid andernfalls gibt es möglicherweise einen zusätzlichen Durchgang durch die oninvalid Handler, um es zu löschen.
Warum, wenn ich Elemente ersetze[i] zu $(“#name”), funktioniert es nicht? Und wenn ich 2 Validierung festlege, zum Beispiel type=’number’ erforderlich, kann ich dann eine andere benutzerdefinierte Nachricht für sie festlegen?
– Lai32290
23. März 2014 um 12:58 Uhr
@Lai32290, weil Sie nicht auf das eigentliche DOM-Objekt zugreifen. $("") gibt ein Array von Objekten zurück, auch wenn es nur eines gibt. $("")[i] ist höchstwahrscheinlich das, was Sie wollen.
– Noah Passalacqua
21. Mai 2016 um 17:12 Uhr
Ich sage nicht, dass dieser Code gut oder schlecht ist, aber der Sinn der Formularvalidierung in HTML5 liegt darin nicht erfordern JavaScript für die Formularvalidierung und verwenden daher die oninvalid Attribut selbst für “Puristen” ist völlig sinnlos.
– John
1. August 2018 um 12:03 Uhr
Dies funktioniert gut für Eingaben mit dem erforderlichen Attribut. Es gilt jedoch nicht für input type=”email”. Nachdem Sie das erste Zeichen Ihrer E-Mail-Adresse eingegeben haben, greifen Sie auf die Standardfehlermeldung “Bitte fügen Sie ‘@’ in …” zurück. Ich habe versucht, dies mit else if (e.target.validity.typeMismatch) { e.target. setCustomValidity(“Meine eigene Nachricht”). Kein Erfolg. Irgendein Vorschlag ?
– Mathias Zaja
20. April 2019 um 18:49 Uhr
Ashwini Jain
Es ist sehr einfach, benutzerdefinierte Nachrichten mit Hilfe von zu steuern HTML5 Fall oninvalid
Dies verursacht einen Fehler in Firefox, bei dem es beim Aktualisieren validiert wird, aber bei Änderungen und Korrekturen fehlschlägt.
– Ryan Charmley
29. August 2013 um 18:07 Uhr
@RyanCharmley durch Verwendung onchange="this.setCustomValidity('')" der Fehler wird weg sein. Überprüfen Sie meine Antwort unten.
– Lohn
1. April 2014 um 5:00 Uhr
Wenn dies nicht funktioniert (z. B. nicht in Safari), verwenden Sie oninput anstatt onvalid.
– Jimothy
27. März 2018 um 17:29 Uhr
@Jimothy hat damit Recht, oninput ist die universellere Lösung, onvalid hat bei mir auch in Chrome nicht funktioniert.
– ThisGuyCantEven
11. Juni 2018 um 15:55 Uhr
kzh
Notiz: Dies funktioniert nicht mehr in Chrome, nicht in anderen Browsern getestet. Siehe Änderungen unten. Diese Antwort wird hier als historische Referenz hinterlassen.
Wenn Sie der Meinung sind, dass die Validierungszeichenfolge wirklich nicht per Code festgelegt werden sollte, können Sie das Titelattribut Ihres Eingabeelements auf „Dieses Feld darf nicht leer gelassen werden“ setzen. (Funktioniert in Chrome 10)
Und in Firefox können Sie dieses Attribut hinzufügen:
x-moz-errormessage="This field should not be left blank."
Bearbeiten
Dies scheint sich geändert zu haben, seit ich diese Antwort ursprünglich geschrieben habe. Jetzt ändert das Hinzufügen eines Titels die Gültigkeitsnachricht nicht, es fügt der Nachricht lediglich einen Nachtrag hinzu. Die obige Geige gilt immer noch.
Bearbeiten 2
Chrome macht jetzt ab Chrome 51 nichts mehr mit dem Titelattribut. Ich bin mir nicht sicher, in welcher Version sich das geändert hat.
Dharmendra Jha
Es ist sehr einfach, benutzerdefinierte Nachrichten mit Hilfe von zu steuern HTML5oninvalid Fall
Hier ist der Code:
User ID
<input id="UserID" type="text" required
oninvalid="this.setCustomValidity('User ID is a must')">
Es ist erforderlich, die Gültigkeitsmeldung auf leer zu setzen, sobald die Steuerung eine Eingabe erhält, sonst wird die zuerst ausgeführte Gültigkeitsmeldung für alle Felder angezeigt. Fügen Sie oninput=”setCustomValidity(”)” hinzu, wenn Sie setCustomValidity() aufrufen. +1 zu Somnaths Antwort.
– Tarang
27. April 2015 um 15:48 Uhr
Durch Setzen und Deaktivieren der setCustomValidity Zur richtigen Zeit funktioniert die Validierungsnachricht einwandfrei.
<input name="Username" required
oninvalid="this.setCustomValidity('Username cannot be empty.')"
onchange="this.setCustomValidity('')" type="text" />
ich benutzte onchange anstatt oninput Dies ist allgemeiner und tritt auf, wenn der Wert in einer beliebigen Bedingung geändert wird, sogar durch JavaScript.
Es ist erforderlich, die Gültigkeitsmeldung auf leer zu setzen, sobald die Steuerung eine Eingabe erhält, sonst wird die zuerst ausgeführte Gültigkeitsmeldung für alle Felder angezeigt. Fügen Sie oninput=”setCustomValidity(”)” hinzu, wenn Sie setCustomValidity() aufrufen. +1 zu Somnaths Antwort.
– Tarang
27. April 2015 um 15:48 Uhr
Hleinon
Ich habe eine kleine Bibliothek erstellt, um das Ändern und Übersetzen der Fehlermeldungen zu erleichtern. Sie können die Texte sogar nach Fehlertyp ändern, der derzeit nicht verfügbar ist, indem Sie verwenden title im Chrome bzw x-moz-errormessage im Firefox. Gehen schau es dir auf GitHub anund geben Sie Feedback.
Warum akzeptieren Sie nicht einfach die Standardnachricht des Browsers? Das ist es, was Benutzer für jede andere Website sehen, die sie besuchen. Sie verwirren Ihre Benutzer nur, indem Sie eine nicht standardmäßige Nachricht erstellen. (Google hat wahrscheinlich mehr UX-Evaluierung und -Tests durchgeführt, um diesen Wortlaut zu bestimmen, als Sie!).
– ChrisV
4. Dezember 2011 um 15:27 Uhr
@ChrisV Was ist mit mehrsprachigen Websites?
– inemanja
26. November 2013 um 11:22 Uhr
In meinem Fall möchte ich vor dem Posten überprüfen, ob der Wert eine Zahl ist, aber ich kann das Attribut type=”number” (aus Gründen) nicht verwenden. Also setze ich das Musterattribut so, dass es nach Zahlen und optionalen Dezimalstellen sucht, die die Nachricht liefern , „Bitte passen Sie das angeforderte Format an“, bei einem Fehler. Ich würde lieber sagen: “Du musst uns eine Nummer bucko schenken.”
– Kristopher
29. März 2017 um 14:58 Uhr