Die Formularvalidierung war schon immer mein unbeliebtester Teil der Webentwicklung. Sie müssen die Validierung sowohl auf der Client- als auch auf der Serverseite duplizieren, viele Ereignisse verarbeiten und sich Gedanken über das Styling von Formularelementen machen. Um die Formularvalidierung zu unterstützen, fügte die HTML-Spezifikation einige neue Formularattribute hinzu, wie z required Und pattern als sehr grundlegende Validierung zu fungieren. Wussten Sie jedoch, dass Sie die native Formularvalidierung mit JavaScript steuern können?
validity
Jedes Formularelement (inputzum Beispiel) bietet a validity Eigenschaft, die a darstellt ValidityState. ValidityState sieht in etwa so aus:
// input.validity
{
badInput: false,
customError: true,
patternMismatch: false,
rangeOverflow: false,
rangeUnderflow: false,
stepMismatch: false,
tooLong: false,
tooShort: false,
typeMismatch: false,
valid: false,
valueMissing: true
}
Jede Eigenschaft in der ValidityState kann ungefähr einem bestimmten Validierungsproblem entsprechen: valueMissing würde dazu passen required Attribut, tooLong Und tooShort passen minLength Und maxLengthusw.
Überprüfen der Gültigkeit und Festlegen einer benutzerdefinierten Validierungsnachricht
Jedes Formularfeld bietet eine Standardfehlermeldung für jeden Fehlertyp, aber das Festlegen einer benutzerdefinierteren Meldung für Ihre Anwendung ist wahrscheinlich besser. Sie können die Formularfelder verwenden setCustomValidity So erstellen Sie Ihre eigene Nachricht:
// Check validity
input.checkValidity();
if(input.validity.valueMissing) {
input.setCustomValidity('This is required, bro! How did you forget?');
} else {
// Clear any previous error
input.setCustomValidity('');
}
Setzen Sie einfach die Nachricht durch setCustomValidity nicht zeigen die Botschaft jedoch.
reportValidity
Damit der Fehler dem Benutzer angezeigt wird, verwenden Sie das Formularelement reportValidity Methode:
// Show the error! input.reportValidity();
Der Fehler-Tooltip wird sofort auf dem Bildschirm angezeigt. Im folgenden Beispiel wird der Fehler alle fünf Sekunden angezeigt:Siehe .
Hooks in das native Formularvalidierungssystem zu haben, ist so wertvoll und ich wünschte, Entwickler würden es mehr nutzen. Jede Website hat ihr eigenes clientseitiges Validierungsdesign, Ereignisbehandlung usw. Lassen Sie uns das verwenden, was uns zur Verfügung gestellt wurde!
