In diesem Thread soll es um die Usability von Formularfeldern gehen, mit dem Fokus auf Validität, Erforderlichkeit und Meldungstexten.

Die Merkmale von Formularfelder sind komplex.

1. Hat es den Fokus?
2. Ist es erforderlich?
3. Ist es valide?
(Diese ersten drei Merkmale können in Kombination auftreten.)
4. Hovertext?
5. Unter dem Formular angezeigter Meldungstext?
6. Placeholder?
7. Sollen Standards des Browsers überschrieben werden oder nicht?

Hat jemand von Euch dieses Thema schonmal für eine andere Site durchgearbeitet und kann eine Empfehlung aussprechen oder eine vorbildliche Beispielseite nennen?

Testcase:

https://borumat.de/-/fahrradzukunft/...required-focus


1. Fokus
FF+GC: Jedes Feld im Fokus erhält einen blauen Rahmen, das finde ich gut, es erleichtert die Orientierung.

2. Pattern
FF+GC: Ohne Pattern findet offenbar keine (vernünftige) Validierung im Feld Mail statt. "foo@bar" geht als valide durch.

3. Erforderlichkeit
FF+GC: Sie wird ausschließlich durch einen Hovertext signalisiert.
Das finde ich zu wenig.
Etabliert ist das *.
Ich habe das per generated content einfügen lassen.

4. Invalidität
FF: Kennzeichnung mit rotem Rahmen und Hovertext "Bitte halten Sie das angegebene Format ein"
GC: Kennzeichnung mit roter Wellenlinie als Unterstrich und Hovertext "Ihre Eingabe muss mit dem geforderten Format übereinstimmen"

Ich halte es für sinnvoll, den Hinweistext nicht als Hovertext sondern als normalen dauerhaft sichtbaren Text direkt unter dem Formularfeld auszugeben. Und dazu auch den Text verständlich zu formulieren wie z.B.:
""Bitte korrigieren Sie die Telefonnummer. Am Anfang kann ein "+" stehen. Ansonsten sind Ziffern, Leerzeichen oder "-" möglich."

Ich habe per generated content eine Meldung einfügen lassen. Leider werden auch leere Felder als "invalid" betrachtet. Das muss ich also noch lösen.

Wie man die Hovernachrichten deaktiviert - sie sind ja überflüssig, wenn es ausgegeben Text gibt - weiß ich noch nicht.

5. Leere Felder
FF+GC: Leere Felder werden nicht als invalide gekennzeichnet. Gut so.

FF: Sobald man jedoch einmal etwas in ein Feld eingegeben hat, was invalide ist, bleibt die Kennzeichnung als invalide auch dann erhalten, wenn man den Inhalt ganz wieder löscht.
Das ist inkonsistent.
GC: Dort verschwindet die Kennzeichnung

__________________

Es ist durchaus ausreichend, die standardvalidierungen zu verwenden. Bzw anders ausgedrückt: Verwendet man lediglich die Standardformatierungen und Standardfehlermeldungen dann ist ein Formular Usable genug laut Accessibility Guidelines

Zusätzlich dazu: Diese generierten "bubbles" genügen in den seltensten Fällen nicht den Anforderungen ans design und auch das Verhalten ist oft nicht das wirklich gewünschte, da es zB verschwindet, wenn man raustabbt... Da gibt es leider keine Möglichkeiten, diese Nachrichten zu beeinflussen. Deshalb werden die auch auf keiner größeren Seite wirklich verwendet. Persönlich finde ich es schade, dass es hier keine Gestaltungsmöglichkeiten gibt, aber ist leider so.
Man bekommt diese Hinweise weg, indem man <form novalidate> verwendet.

Deshalb wird Formularvalidierung heutzutage eigentlich immer mit JS umgesetzt. Mittels parsleyjs (Parsley - The ultimate JavaScript form validation library) kannst du jeden Art von Validierung haben, die du möchtest.

Die Validierung einer Mail brauchst du nicht mit einer pattern anpassen, foo@bar ist durchaus eine gültige Mailadresse. Siehe auch: https://stackoverflow.com/questions/...-without-a-dot

Der einzige Weg eine Mailadresse zu validieren ist, eine Mail an die Adresse zu schicken und auf eine Bestätigung des Users zu warten.


Bezüglich generated Content: Der wird in IE11 zb nicht vorgelesen. https://tink.uk/accessibility-suppor...rated-content/

Zusammenfassend: Entweder man nimmt die im Browser vorhandene Validierung, dann muss man aber auch mit dem Verhalten zufrieden sein, ändern kann man das nicht.
Oder man verwendet JS zur Formvalidierung, das funktioniert gut und man kann auch jeglichen Spezialfall damit abdecken den man braucht.
Natürlich ist es auch möglich beide Varianten auf einmal zu nutzen (progressive enhancement)

Danke erstmal für Deine Antwort

Meinst Du mit "bubbles" die Texte, die beim Hovern eines Formularfeldes gezeigt werden?

Wirklich schade, dass man sie nicht beeinflussen kann.

Das Attribute "novalidate" als radikale Maßnahme werde ich wohl nicht anwenden.

Denn die Validierung via parsleyjs übersteigt meine Fähigkeiten. Ich kann nicht programmieren.

Danke auch für Deinen Hinweis, dass "foo@bar" eine valide Mailadresse ist. Das wußte ich nicht.

Ein regulären Ausdruck für die Telefonnummer habe ich selber geschrieben, das werde ich verwenden. Und für Mail eben den Standard.

Die im Ausgangsposting genannten Details zur Usability werde ich aufgeben.

Es wird schon Mühe/Herausforderung genug, ein PHP-Skript für das Kontaktformular zu finden und dessen Anwendung zu verstehen.

Insbesondere, weil ich gerne ein logisches ODER für die Felder MAIL und TELEFON verwirklichen möchte.

__________________

Ja, damit meine ich diese vom Browser generierten Hilfe-Bubbles. Die schauen überall anders aus und verhalten sich leider auch etwas anders.

Für parsleyjs muss man nicht viel programmieren können, da wird das meiste über data- attribute gesteuert. Du deklarierst zB ein Formular, welches validiert werden soll so:
Leute, die kein JS haben, bekommen die standard-validierungen angezeigt (soweit möglich)

Dann kannst du so zB die standardvalidierung erweitern, dass mindestens zwei ausgewählt werden sollen:

Leider ist ein entweder-oder ist nicht ganz so trivial auszuführen und nicht standardmäßig enthalten, kann aber auch realisiert werden.

Code-Beispiele von diesem einfachen Formular:
Parsley - Examples | Simple form demo

Parsley - The ultimate documentation Liste der vorhandenen Validatoren,

Vielen Dank! Wenn die Verwendung von parsleyjs weniger kompliziert ist als ich dachte, werde ich mir das mal ansehen.


Zur Entweder-Oder-Logik bei einem Kontaktformular, werde ich mal in einem PHP-Forum anfragen, da es ja unwahrscheinlich ist, dass hier noch jemand antwortet.


Schönen Tag!

__________________