wake-up-neo.net

HTML5: Warum lässt mein Muster aufgrund meines Attributs "ungültig" fehlschlagen?

Dieses kleine HTML5-Passwortfeld funktioniert einwandfrei OHNE das oninvalid-Attribut (das Muster sagt: mindestens 6 Zeichen):

<form>
    <input type="password" name="user_password_new" pattern=".{6,}" required />      
    <input type="submit"  name="register" value="Register" />
</form>

Siehe das jsFiddle hier .

Wenn ich jedoch ein oninvalid-Attribut hinzufüge, das eine benutzerdefinierte Fehlermeldung ausgibt, wenn die Benutzereingabe nicht in das Muster passt, wird das gesamte Feld NIEMALS gültig. Siehe den Code hier:

<form>
    <input type="password" name="user_password_new" pattern=".{6,}" oninvalid="setCustomValidity('Minimum length is 6 characters')" required />      
    <input type="submit"  name="register" value="Register" />
</form>

Siehe das jsFiddle hier .

Kannst du den Fehler erkennen?

html5input
28
Sliq

Wenn Sie mit setCustomValidity() einen Wert festlegen, ist das Feld ungültig. Das Festlegen einer Zeichenfolge mit einer Länge ungleich Null bewirkt, dass der Browser das Feld als ungültig betrachtet. Um die Auswirkungen anderer Validierungen zu berücksichtigen, müssen Sie die benutzerdefinierte Gültigkeit löschen:

<input type="password" name="user_password_new" pattern=".{6,}" required
   oninvalid="setCustomValidity('Minimum length is 6 characters')" 
   oninput="setCustomValidity('')" />
80
robertc

Da ich über das gleiche Problem gestolpert bin, ist hier meine Lösung - getestet und arbeitet mit FF, Chrome, IE 10, Edge (Feb 2017).

<form>
<input pattern="1234" oninput="setCustomValidity(''); checkValidity(); setCustomValidity(validity.valid ? '' :'please enter 1234');">
<input type="email" required>
<input type="submit">
</form>

Erklärung:

setCustomValidity(''); entfernt die benutzerdefinierte Fehlerzeichenfolge, die andernfalls beim Validierungsprozess immer zu einem ungültigen Feld führen würde.

checkValidity(); führt eine manuelle Validierung durch - genauso wie bei der Formularübermittlung. Das Ergebnis wird in validity.valid gespeichert.

Das zweite setCustomValidity(validity.valid ? '' :'please enter 1234'); setzt nun die Fehlerzeichenfolge entsprechend dem Validierungsergebnis. Wenn das Feld gültig ist, muss es leer sein. Andernfalls kann die benutzerdefinierte Fehlerzeichenfolge festgelegt werden.

11
musicman

Ich benutze gerne so:

<input type="email" name="Email" required oninvalid="setCustomValidity('ErrorMessage')"/>

Und für alle gültigen Eingabedaten nicht angeschlossen

UPD, noch etwas für bessere Arbeit:

    $("input").attr("onblur", "setCustomValidity('')");
    $("input").attr("oninput", "setCustomValidity(' ')");
3
Anonimys

Obwohl die Antworten auf diese Frage gute Informationen enthielten, reichten sie für meine Bedürfnisse nicht aus. Ich muss unterschiedliche Meldungen anzeigen, abhängig davon, welche Gültigkeitsregel fehlgeschlagen ist. In den anderen Beispielen wird dieselbe Validierungsfehlermeldung für alle Bewertungsfehler verwendet.

Die Eigenschaft "Gültigkeit" eines Formularobjekts enthält den Schlüssel zum Erstellen mehrerer Validierungsfehlermeldungen.

Sie können alle verschiedenen "Gültigkeit" -Eigenschaften auf dieser Website überprüfen.

https://www.w3schools.com/js/js_validation_api.asp

Dieses Beispiel zeigt, wie zwei verschiedene Überprüfungsmeldungen angezeigt werden. Wenn Sie die Kommentarzeile in der console.log () -Zeile nicht kommentieren, können Sie die Änderung der Gültigkeitseigenschaft beobachten, wenn Sie ein Feld eingeben.

<label for="user_password_new">New Password:</label>
<input type="password" name="user_password_new" id="user_password_new"
    pattern=".{6,}"
    value=""
    required
    oninput="
        setCustomValidity('');
        checkValidity();
        // console.log(validity);
        if (validity.patternMismatch) {
            setCustomValidity('Please enter at least six characters.');
        }
        else if (validity.valueMissing) {
            setCustomValidity('This field is required.');
        }
        else if (validity.valid) {
            setCustomValidity('');
        }
        // allow default validation message to appear for other validation failures
    "
>

HINWEIS: Einige Gültigkeitsprüfungen sind "typspezifisch". Beispielsweise werden die Attribute "rangeOverflow", "rangeUnderflow" und "stepMismatch" gesetzt, wenn type sie verwendet. Typ = "Nummer".

0
Scott Jibben

Sie können title verwenden, solange Sie nichts dagegen haben, 'You must use this format:' vor Ihrer Nachricht zu haben. Wenn Sie eine vollständige benutzerdefinierte Nachricht wünschen, funktionierte die setCustomValidity() für mich.

0
usr4896260