Wie kann ich eine benutzerdefinierte Nachricht erstellen, wenn ein erforderliches HTML5-Eingabemuster nicht bestanden wird?

Lesezeit: 6 Minuten

Ich habe folgendes:

<input required pattern=".{6,}" class="big medium-margin" name="Password" placeholder="Password" size="25" type="password" />

Wenn ich nur ein Zeichen eingebe bekomme ich folgende Meldung:

"Please match the requested format"

Gibt es eine Möglichkeit, diese Nachricht so anzupassen, dass sie etwas wie “Bitte geben Sie mindestens 5 Zeichen ein” sagt?

  • Stellen Sie sicher, dass die Anforderungen sichtbar sind, auch wenn Javascript deaktiviert ist. Vielleicht fügen Sie es dem Label für diesen Eingang hinzu?

    – Sumurai8

    1. Oktober 2013 um 18:06 Uhr

  • mögliches Duplikat stackoverflow.com/questions/5272433/…

    – Kasper Taeymans

    1. Oktober 2013 um 18:06 Uhr

Benutzer-Avatar
OBV

Mit diesem Trick können Sie schnell und schmutzig vorgehen:

<form>  
 <label for="username">Username:</label><br/>
  <input id="username" type="text" pattern=".{6,}" autofocus required title="Please enter at least 5 characters">        
  <input id="submit" type="submit" value="create">   
</form>

  • Wenn ein Fehler auftritt (z. B. eine Anzeigemeldung), wird dieser Fehler nicht behoben.

    – Athar

    26. Februar 2016 um 11:26 Uhr

  • @Athar es verschwindet, sobald die Eingabe gültig wird.

    – naXa steht zur Ukraine

    19. Oktober 2018 um 15:00 Uhr

  • Danke für die Antwort, ja, es sollte verschwinden und ich habe das in letzter Zeit nicht getestet.

    – Athar

    22. Oktober 2018 um 12:11 Uhr

  • Diese Antwort, die die verwendet title -Attribut, ist in Bezug auf die HTML-Spezifikation idiomatisch korrekt: html.spec.whatwg.org/multipage/input.html#attr-input-titleim Gegensatz zu der akzeptierten Lösung, die verwendet setCustomValidity unangemessen.

    – amn

    18. September 2019 um 9:10 Uhr


  • Beachten Sie jedoch, dass in der Spezifikation „Benutzeragenten kann Verwenden Sie den Inhalt dieses Attributs, wenn es vorhanden ist, wenn Sie den Benutzer darüber informieren, dass das Muster nicht übereinstimmt”, was sich stark von “Benutzeragenten muss benutze die […]”. Tatsächlich implementiert kein aktueller Desktop-Browser dieses zulässige Verhalten mit dem Code von JSFiddle (Chrome 81, FF 78 und Edge 18.18363)

    – Mike „Pomax“ Kamermans

    18. Mai 2020 um 18:01 Uhr


Benutzer-Avatar
GP.

Verwenden: setCustomValidity

Erste Funktion setzt benutzerdefinierte Fehlermeldung:

$(function(){
    $("input[name=Password]")[0].oninvalid = function () {
        this.setCustomValidity("Please enter at least 5 characters.");
    };
});

Die zweite Funktion schaltet die benutzerdefinierte Nachricht aus. Ohne diese Funktion wird die benutzerdefinierte Fehlermeldung nicht wie die Standardnachricht deaktiviert:

$(function(){
    $("input[name=Password]")[0].oninput= function () {
        this.setCustomValidity("");
    };
});

PS Sie können oninput für alle Eingabetypen verwenden, die eine Texteingabe haben.

Zur Eingabe type="checkbox" Sie können onclick verwenden, um auszulösen, wenn der Fehler ausgeschaltet werden soll:

$(function(){
    $("input[name=CheckBox]")[0].onclick= function () {
        this.setCustomValidity("");
    };
});

Zur Eingabe type="file" Sie sollten ändern.

Der Rest des Codes innerhalb der Änderungsfunktion besteht darin, zu prüfen, ob die Dateieingabe nicht leer ist.

PS Diese Prüfung auf leere Dateien gilt nur für eine Datei. Sie können jede beliebige Dateiprüfungsmethode verwenden, die Ihnen gefällt, und Sie können überprüfen, ob der Dateityp Ihren Wünschen entspricht.

Funktion für die Bearbeitung benutzerdefinierter Nachrichten bei der Dateieingabe:

$("input[name=File]").change(function () {
    let file = $("input[name=File]")[0].files[0];
    if(this.files.length){
        this.setCustomValidity("");
    }
    else {
        this.setCustomValidity("You forgot to add your file...");
    }
    //this is for people who would like to know how to check file type
    function FileType(filename) {
        return (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename) : undefined;
    }
    if(FileType(file.name)!="pdf"||FileType(file.name)!="PDF"){
        this.setCustomValidity("Your file type has to be PDF");
    //this is for people who would like to check if file size meets requirements
    else if(file.size/1048576>2){
        // file.size divided by 1048576 makes file size units MB file.size to megabytes
        this.setCustomValidity("File hast to be less than 2MB");
    }
    else{
    this.setCustomValidity("");
    }
});//file input custom message handling function

Erforderliches Attribut für HTML5-Formular. Benutzerdefinierte Validierungsnachricht festlegen?

JSFiddle: http://jsfiddle.net/yT3w3/

Nicht-JQuery-Lösung:

function attachHandler(el, evtname, fn) {
    if (el.addEventListener) {
        el.addEventListener(evtname, fn.bind(el), false);
    } else if (el.attachEvent) {
        el.attachEvent('on' + evtname, fn.bind(el));
    }
}
attachHandler(window, "load", function(){
    var ele = document.querySelector("input[name=Password]");
     attachHandler(ele, "invalid", function () {
        this.setCustomValidity("Please enter at least 5 characters.");
        this.setCustomValidity("");
    });
});

JSFiddle: http://jsfiddle.net/yT3w3/2/

  • Soll ich das oben auf der Seite platzieren? Können Sie mir auch zeigen, wie ich das nennen soll. Muss ich etwas in der Umgebung haben, um sicherzustellen, dass die Seite fertig ist?

    Benutzer1679941

    1. Oktober 2013 um 18:18 Uhr

  • Der an $() übergebene Funktionsblock wird ausgeführt, wenn die Seite bereit ist. Kopieren Sie also einfach den Code im Skript-Tag irgendwohin und es wäre in Ordnung.

    – gp.

    1. Oktober 2013 um 18:29 Uhr

  • Ich mache das, bekomme aber die Meldung: Uncaught ReferenceError: $ is not defined

    Benutzer1679941

    1. Oktober 2013 um 18:40 Uhr

  • Die Antwort ist falsch. setCustomValidity setzt keine benutzerdefinierte Validierungsnachricht – es setzt benutzerdefinierte Validierungsbedingung! Das bedeutet, dass es für Fälle gilt, in denen der Wert eines Eingabesteuerelements mit einem bestimmten Muster übereinstimmt, die Anwendung es jedoch immer noch als ungültig betrachtet – Sie rufen es dann auf setCustomValidity (als Antwort auf Wertänderung) mit der Meldung, die für das jetzt ungültige Control angezeigt werden soll. Wenn sich der Wert ändert, was die Anwendung wieder für gültig hält, setCustomValidity sollte mit einem leeren String aufgerufen werden.

    – amn

    18. September 2019 um 9:02 Uhr


  • Wie die Frage erklärt, möchte die Person, dass die Anwendung den Benutzer auf einen Wert aufmerksam macht, der dies tut nicht dem angegebenen Muster entsprechen, was keine benutzerdefinierte Gültigkeitsbedingung ist, sondern eine integrierte Prüfung, die der Benutzeragent sowieso durchführt. Der richtige Weg, den Benutzeragenten so zu programmieren, dass er den Benutzer mit einer benutzerdefinierten Nachricht benachrichtigt, wenn der Wert nicht dem Muster entspricht (was in der Frage gefragt wird), ist die zu verwenden title Attribut.

    – amn

    18. September 2019 um 9:07 Uhr


Ich würde ein weiteres Attribut hinzufügen oninvalid.

oninvalid="setCustomValidity('Please enter at least 5 characters')"

<input required pattern=".{6,}" class="big medium-margin" name="Password" placeholder="Password" size="25" type="password" oninvalid="setCustomValidity('Please enter at least 5 characters')"/>

  • Dies ist nur teilweise abgeschlossen. Es “löscht” den Fehler nicht, selbst wenn das Muster abgeglichen ist. Die richtige Antwort finden Sie hier: stackoverflow.com/a/30136146/870729

    – zufälliger_Benutzername

    22. Juni 2017 um 21:06 Uhr


  • Diese Antwort löscht die Fehlermeldung nicht und ermöglicht daher keine Validierung des Formulars, selbst wenn Sie die Daten korrigieren. Sie müssen auch hinzufügen onchange="setCustomValidity('')" um die Nachricht zu löschen, damit das Formular tatsächlich validiert werden kann.

    – jscherk

    16. Januar 2020 um 7:33 Uhr

Ich habe festgestellt, dass zumindest Chrome der Nachricht den Titel der Eingabe automatisch hinzufügt, sodass kein zusätzliches js erforderlich ist, siehe dies:

Geben Sie hier die Bildbeschreibung ein

die eingabe sieht so aus:

<input type="text" title="Number with max 3 decimals" pattern="^\d+(\.\d{1,3})?$">

Es ist sehr einfach ohne Javascript- oder jQuery-Validierung. Wir können es durch HTML5 erreichen

Nehmen wir an, wir haben ein HTML-Feld:

<input required pattern=".{6,}" class="big medium-margin" name="Password" placeholder="Password" size="25" type="password" />

Ändern Sie einfach das HTML als

<input required pattern=".{6,}" class="big medium-margin" title="Please enter at least 5 characters." name="Password" placeholder="Password" size="25" type="password" />

Wenn Sie es bemerken, fügen Sie einfach title = “Fehlermeldung” hinzu.

Wann immer das Formular gepostet wird, werden die angegebenen Nachrichten angezeigt, und wir brauchten keine JavaScript- oder jQuery-Prüfung. Diese Lösung funktioniert für mich.

Benutzer-Avatar
federico-t

Sie müssten die verwenden setCustomValidity Funktion. Das Problem dabei ist, dass es nur eine benutzerdefinierte Nachricht für Benutzer garantiert, die JavaScript aktiviert haben.

<input required pattern=".{6,}" ... oninput="check(this)">
                                    ^^^^^^^^^^^^^^^^^^^^^

function check (input) {
    if (input.value.search(new RegExp(input.getAttribute('pattern'))) >= 0) {
        // Input is fine. Reset error message.
        input.setCustomValidity('');
    } else {
        input.setCustomValidity('Your custom message here.');
    }
}

Benutzer-Avatar
jsherk

Ich benutze einfach oninvalid um die benutzerdefinierte Gültigkeitsfehlermeldung festzulegen und dann zu verwenden onchange um die Nachricht zurückzusetzen, damit das Formular gesendet werden kann.

<input type="number" oninvalid="this.setCustomValidity('Please enter an INTEGER')" onchange="this.setCustomValidity('')" name="integer-only" value="0" min="0" step="1">

1379230cookie-checkWie kann ich eine benutzerdefinierte Nachricht erstellen, wenn ein erforderliches HTML5-Eingabemuster nicht bestanden wird?

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

Privacy policy