Wie lege ich benutzerdefinierte Validierungsmeldungen für HTML-Formulare fest?

Lesezeit: 6 Minuten

Benutzeravatar von Skizit
Skizit

Ich habe folgendes HTML-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, 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

Benutzeravatar von Somnath Kadam
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)

    – phil294

    3. Oktober 2019 um 11:05 Uhr

Benutzeravatar von robertc
Robertc

Verwenden 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("");
        };
    }
})

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

Benutzeravatar von Ashwini Jain
Ashwini Jain

Es ist sehr einfach, benutzerdefinierte Nachrichten mit Hilfe von zu steuern HTML5 Fall oninvalid

Hier ist Code:

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

Das ist am wichtigsten:

onvalid="this.setCustomValidity('')"

  • Überprüfen Sie auch andere Validierungen wie Muster, Min/Max-Werte usw. sanalksankar.blogspot.com/2010/12/…

    – Jaider

    24. November 2012 um 21:55 Uhr

  • 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

Benutzeravatar von kzh
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)

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

Sehen 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."

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.

Benutzeravatar von Dharmendra Jha
Dharmendra Jha

Es ist sehr einfach, benutzerdefinierte Nachrichten mit Hilfe von zu steuern HTML5 oninvalid 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


Benutzeravatar von hleinone
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.

Es wird verwendet wie:

<input type="email" required data-errormessage-value-missing="Please input something">

Da ist ein Demo verfügbar bei jsFiddle.

1446270cookie-checkWie lege ich benutzerdefinierte Validierungsmeldungen für HTML-Formulare fest?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy