Wie kann ich Standardfehlermeldungen für die Validierung von HTML-Formularen ändern oder entfernen?

Lesezeit: 4 Minuten

Emil

Ich habe zum Beispiel eine textfield. Das Feld ist obligatorisch, nur Zahlen sind erforderlich und die Länge des Werts muss 10 sein. Wenn ich versuche, ein Formular mit einem Wert zu senden, dessen Länge 5 ist, wird die Standardfehlermeldung angezeigt: Please match the requested format

<input type="text" required="" pattern="[0-9]{10}" value="">

Wie kann ich die Standardmeldungen zu HTML-Formularvalidierungsfehlern ändern?

Wenn der erste Punkt erledigt werden kann, gibt es eine Möglichkeit, einige Eigenschaftsdateien zu erstellen und in diesen Dateien benutzerdefinierte Fehlermeldungen festzulegen?

Ich habe einen Fehler in der Mahoor13-Antwort gefunden, er funktioniert nicht in Schleife, also habe ich ihn behoben und eine Antwort mit einigen Korrekturen gegeben, die Sie im Antwortbereich finden. Hier ist der Link stackoverflow.com/questions/10361460/…

– Darschan Gorasia

15. März 2017 um 8:31 Uhr

Mahoor13

Dies ist die JavaScript-Lösung:

 <input type="text"
    pattern="[a-zA-Z]+"
    oninvalid="setCustomValidity('Please enter Alphabets.')"
    onchange="try{setCustomValidity('')}catch(e){}" />

Das „onchange“-Ereignis muss, wenn Sie ungültige Eingabedaten setzen, die Eingabe korrigieren und das Formular erneut senden. Ich habe es auf Firefox, Chrome und Safari getestet.

Aber für moderne Browser:

Moderne Browser benötigten kein JavaScript zur Validierung. Mach es einfach so:

<input type="text"
    pattern="[a-zA-Z]+"
    title="Please enter Alphabets."
    required="" />

Ich schlage vor, Inline-Ereignisse nicht zu verwenden. Es ist keine gute Praxis.

– Jared

1. Mai 2013 um 6:54 Uhr
@ Mahoor13 Ich habe es ähnlich geschrieben, aber es wird nie validiert. Kannst du einen Tipp geben? jsfiddle.net/2USxy

– Sliq

31. Mai 2013 um 23:36 Uhr
Es gibt auch eine benutzerdefinierte Firefox-Eigenschaft, die Sie hinzufügen können und die gut funktioniert: x-moz-errormessage=”Bitte nur Zahlen eingeben”

– Koliff

18. September 2013 um 13:40 Uhr
Verwenden Sie besser “onkeyup” anstelle von “onchange”, um effektiv zu sehen, ob die Eingabe gültig ist oder nicht.

– SamSan

2. Juni 2014 um 2:38 Uhr
Dies hat das folgende Problem (zumindest in Chrome 55): Wenn die ungültige Nachricht erscheint, wenn der Benutzer den Fokus auf dem ungültigen Feld behält (ohne zu klicken) und das Feld bearbeitet, wird die Nachricht immer wieder angezeigt – auch wenn das Feld gültig ist – es ist notwendig, um sich entweder zu konzentrieren oder das Senden auszulösen.

– Leonbloy

21. Januar 2017 um 15:40 Uhr

Wenn Sie pattern= verwenden, wird angezeigt, was Sie in das Titelattribut eingeben, also ist kein JS erforderlich, tun Sie es einfach:

<input type="text" required="" pattern="[0-9]{10}" value="" title="This is an error message" />

Gute Antwort, aber seien Sie hier vorsichtig mit der Abwärtskompatibilität (oder sogar mit der aktuellen).

– bohney

8. Oktober 2012 um 19:32 Uhr
Wenn ich einen Titel auf „foo“ setze, erhalte ich „Bitte stimmen Sie mit dem angeforderten Format überein. foo“, sodass dies bei mir nicht funktioniert

– Dan

26. März 2014 um 8:35 Uhr
Der Titel wird auch als Tooltip-Text beim Überfahren mit der Maus verwendet, daher würde ich mich von diesem Ansatz fernhalten.

– fotijr

2. März 2015 um 19:30 Uhr
Der Titel wird auch als Tooltip-Text beim Bewegen der Maus verwendet, daher ist dies wahrscheinlich der beste Ansatz.

– OdraEncoded

23. August 2015 um 22:33 Uhr
Ich finde die Idee mit dem title Attribut soll die Anforderung beschreiben, z. B. “Geben Sie eine 10-stellige Zahl ein.” statt eines Fehlers wie “Dies ist keine gültige Nummer”. Bei der Beschreibung der Anforderung gibt es kein Problem damit, dass derselbe Text sowohl beim Mouse-Hover als auch in der Validierungsfehlermeldung angezeigt wird. (Ich sage nicht, dass meine Formulierung die beste ist, ich weiß, dass man darüber streiten könnte, ob man “Enter …” oder “Value must be …” usw. sagen soll oder nicht.)

– Ken Lyon

11. April 2019 um 17:49 Uhr

<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Plz enter on Alphabets ')" />

Ich habe diesen Code in einem anderen Beitrag gefunden.

danke, es hat bei mir funktioniert. Obwohl ich keinen Beitrag oder Blog oder keine Website gefunden habe, in der dies erwähnt wird.

– Benutzer219628

27. Januar 2016 um 21:31 Uhr
Beachten Sie den folgenden Beitrag, wenn Sie die Verwendung von setCustomValitidy in Betracht ziehen stackoverflow.com/questions/16867407/…

– Konstantinos Chertouras

12. November 2017 um 9:34 Uhr

Rikin Patel

HTML:

<input type="text" pattern="[0-9]{10}" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);"  />

JAVASCRIPT:

function InvalidMsg(textbox) {

     if(textbox.validity.patternMismatch){
        textbox.setCustomValidity('please enter 10 numeric value.');
    }    
    else {
        textbox.setCustomValidity('');
    }
    return true;
}

Geige-Demo

Luca Fagioli

So verhindern Sie mit jQuery, dass die Browser-Validierungsmeldung in Ihrem Dokument erscheint:

$('input, select, textarea').on("invalid", function(e) {
    e.preventDefault();
});

Benutzer3894381

Sie können diese Warnung wie folgt entfernen:

<input type="text" pattern="[a-zA-Z]+"
    oninvalid="setCustomValidity(' ')"
/>

Setzen Sie die benutzerdefinierte Nachricht einfach auf ein Leerzeichen

Albert

Sie können sie über die Einschränkungsvalidierungs-API ändern: http://www.w3.org/TR/html5/constraints.html#dom-cva-setcustomvalidity

Wenn Sie eine einfache Lösung suchen, können Sie civem.js, Custom Input Validation Error Messages JavaScript lib hier herunterladen: https://github.com/javanto/civem.js
Live-Demo hier: http://jsfiddle.net/hleinone/njSbH/

14461500cookie-checkWie kann ich Standardfehlermeldungen für die Validierung von HTML-Formularen ändern oder entfernen?

#html #Validierung