Die starke Unterauslastung von HTML-Formularvalidierung

 (expressionstatement.com)
2 Punkte von GN⁺ 2024-10-29 | 1 Kommentare | Auf WhatsApp teilen

Die geringe Nutzung von HTML-Formularvalidierung

  • HTML-Formulare verfügen über einen leistungsstarken Validierungsmechanismus, werden aber kaum genutzt. Viele Menschen wissen nur wenig darüber. Das könnte an einem Designfehler liegen.

Attribute, Methoden und Properties

  • Um leere Eingaben zu verhindern, kann das Attribut required hinzugefügt werden.
  • Es gibt drei Möglichkeiten, Eingaben einzuschränken:
    • Verwendung bestimmter type-Attributwerte: "email", "number", "url"
    • Verwendung anderer Eingabeattribute wie "pattern" oder "maxlength"
    • Verwendung der DOM-Methode setCustomValidity: die leistungsfähigste Methode, um beliebige Validierungslogik zu erstellen und komplexe Fälle zu behandeln.

Die Feinheiten der imperativen API

  • Die API setCustomValidity wird nur als Methode bereitgestellt und ist dadurch umständlich zu verwenden.
  • Damit lässt sich zum Beispiel eine Funktion wie das Attribut required umsetzen, um das Absenden eines Formulars zu verhindern, wenn eine Eingabe leer ist.
  • Wenn die Eingabe beim initialen Rendern leer ist, muss sie als ungültig gesetzt werden.

Das Boilerplate-Problem

  • Die Validierung von Initialwerten ist umständlich.
  • Die Validierungslogik wird im onChange-Handler und in der initialen Render-Phase doppelt ausgeführt.
  • Die Kombination aus useRef + useLayoutEffect + onChange ist komplex.

Was fehlt

  • Ein Attribut custom-validity wird benötigt.
  • In deklarativen Frameworks könnte die Eingabevalidierung damit leistungsstark definiert werden.

Die Stärke asynchroner Validierung

  • Es lassen sich Fälle behandeln, in denen ein Benutzername nur dann gültig sein soll, wenn er noch nicht verwendet wird.
  • Dafür ist ein asynchroner Aufruf an den Server nötig, außerdem wird ein Zwischenstatus benötigt.

Implementierung

  • Mit der Funktion verifyUsername wird die Eindeutigkeit eines Benutzernamens geprüft.
  • Mit useQuery wird der Status der Serveranfrage verwaltet.
  • Mit dem Attribut customValidity wird der Ablauf der asynchronen Validierung beschrieben.

Formular zur Passwortbestätigung

  • Es wird ein Formular umgesetzt, in dem ein eingegebenes Passwort erneut eingegeben werden muss.
  • Die Validierung erfolgt durch Prüfung, ob beide Eingabefelder übereinstimmen.

Fazit

  • setCustomValidity kann verschiedenste Validierungsanforderungen erfüllen.
  • Eine leistungsstarke API liefert die eigentliche Stärke.
  • Es bleibt zu hoffen, dass diese Funktion in die HTML-Spezifikation aufgenommen wird.

Zusammenfassung von GN⁺

  • HTML-Formularvalidierung ist leistungsstark, wird aber wenig genutzt. Das könnte an der Komplexität der API liegen.
  • Die Methode setCustomValidity ist ein mächtiges Werkzeug zur Verarbeitung komplexer Validierungslogik.
  • Es wird ein Ansatz vorgestellt, mit dem sich komplexe Szenarien wie asynchrone Validierung behandeln lassen.
  • Der Artikel bietet nützliche Informationen, die Entwicklern helfen, HTML-Formularvalidierung besser zu nutzen.

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-10-29
Hacker-News-Kommentare

  • Webbrowser erlauben es weiterhin nicht, das Styling der integrierten HTML-Validierungsmeldungen zu ändern, und Chrome sowie Firefox folgen nicht den UI-Richtlinien der jeweiligen OS-Plattform, was mit der Ästhetik eines Projekts kollidiert

    • Chrome erlaubte früher die Anpassung des Stils von Validierungsmeldungen über Vendor-Prefix-Pseudoelement-Selektoren, aber diese Funktion wurde entfernt
    • Es gibt Beschwerden über die ineffiziente Nutzung von HTML-Comboboxen und <select multiple>

  • Die Verwendung bestimmter type-Attributwerte (z. B. "email", "number", "url") kann auf Mobilgeräten die optimale Tastatur auslösen und so die User Experience deutlich verbessern

  • Die Leute, die die Spezifikationen schreiben, seien von der realen Nutzung entkoppelt; für einfache Dinge sei das geeignet, aber bei komplexen Formularen sei es besser, sie selbst zu bauen

  • Jemand bedauert aus eigener Erfahrung, die grundlegende Einfachheit von Formularen übersehen zu haben, und bedankt sich dafür, die Perspektive anderer geteilt zu haben

  • Es gibt die Bitte, bei Checkboxen mit Label das Attribut "for" zum Label hinzuzufügen, damit ein Klick auf das Label die Checkbox aktivieren/deaktivieren kann

  • Ein einfaches Beispiel ohne React wird bereitgestellt

  • Die HTML-Formularvalidierung ist großartig, hat aber ein großes Problem: In Firefox for Android funktioniert sie nicht

  • Viele Frameworks und Bibliotheken bieten stylbare Validierungsfunktionen, daher muss man sich die Mühe nicht unbedingt machen

  • Man sollte darauf achten, Validierung nicht übermäßig einzusetzen

    • Jemand musste bei einer Groupon-Rückerstattung wegen der Bedingung "mindestens 15 Wörter" HTML prüfen
    • Das Validierungsmuster erlaubte überhaupt keine Satzzeichen

  • Websites, die bei der 2FA-Eingabe fälschlicherweise type=password verwenden, verwirren Passwort-Manager und Browser