it-swarm.com.de

Allgemeine clientseitige Formularvalidierung

Ich bin der Autor des jQuery Form Validation Plugins , das ich seit 2006 schreibe. Seitdem habe ich einige Anstrengungen unternommen, um die Standardinteraktion zu verbessern, ohne dass der Entwickler, der das Plugin verwendet, Anpassungen vornehmen muss etwas. Der Aufwand ist gut angelegt, da Entwickler ohne jegliche Ausbildung im Interaktionsdesign solide Verbesserungen an ihren Formularen erzielen konnten.

Ich hoffe, hier einige Vorschläge für weitere Verbesserungen zu sammeln. Wenn Sie daran interessiert sind, spielen Sie zunächst ein wenig mit Standard-Demos herum.

Das Verhalten, das Sie dort sehen, ist hier beschrieben , um es zu zitieren: Standardmäßig werden Formulare beim Senden validiert, ausgelöst durch den Benutzer, der auf die Senden-Schaltfläche klickt oder die Eingabetaste drückt, wenn eine Formulareingabe fokussiert ist (Option onsubmit). Sobald ein Feld als ungültig markiert wurde, wird es außerdem überprüft, wenn der Benutzer etwas in das Feld eingibt (Option onkeyup). Wenn der Benutzer etwas Ungültiges in ein gültiges Feld eingibt, wird es auch überprüft, wenn das Feld den Fokus verliert (Option onblur).

Ziel dieser Interaktionen ist es, so früh wie möglich Feedback zu geben und die Benutzer nicht zu ärgern. Das Anzeigen von Fehlermeldungen, bevor der Benutzer überhaupt etwas eingeben konnte, ist nicht hilfreich.

Ein Problem, das kürzlich von jemandem bemerkt wurde, ist Folgendes: (Dann von vorne beginnen) ein Feld fokussieren, etwas eingeben, das löschen, die Registerkarte aus dem Feld entfernen. In diesem Fall sagt das Plugin dies nicht, selbst wenn das Feld benötigt wird. Dieser Jemand schlug vor, dies zu ändern und die "aggressivere" Validierung zu aktivieren, sobald jemand anfing, in ein Feld zu tippen. Da bin ich mir nicht so sicher.

Ein komplexeres Problem ist das Anzeigen von Fehlermeldungen. Das Plugin kann sehr stark angepasst werden, wie in dieser Marketo-Demo zu sehen ist. Hier werden Inline-Nachrichten nur für andere als die erforderlichen Regeln angezeigt, z. Wenn Sie "foobar" als E-Mail-Adresse eingeben, wird neben diesem Feld "Bitte geben Sie eine gültige E-Mail-Adresse ein, Beispiel: [email protected]", ansonsten jedoch nur "Sie haben 12 Felder verpasst. Sie wurden unten hervorgehoben." wird oben angezeigt, während Felder mit einem roten Rand hervorgehoben werden. Während dies in diesem speziellen Design gut funktioniert, bezweifle ich, dass es möglich ist, dies zum Standard für die generische Formularvalidierung zu machen, der überall funktioniert.

Ein guter Standard ist auf jeden Fall wichtig, da sogar ziemlich beliebte Websites kopieren normalerweise nur den Demo-Code und verwenden Sie ihn wie er ist.

Ich freue mich auf Ihre Vorschläge und eine gute Diskussion! Lassen Sie mich wissen, ob ich bestimmte Themen in separate Fragen aufnehmen sollte.

10
Jörn Zaefferer
  • Stellen Sie dem Benutzer eine Bestätigung zur Verfügung, dass seine Eingabe akzeptiert und korrekt validiert wurde. Viele Benutzeroberflächen verwenden das einfache "Häkchen", das nach dem Eingabefeld angehängt wird, um dies anzuzeigen

  • Ermöglichen Sie Benutzern, über einen designbasierten Hinweis (z. B. einen Standardwert, der gelöscht wird) zu erfahren, was das Eingabefeld von ihnen verlangt.

Wenn ich ein Benutzer bin, der weiß, was von mir verlangt wird (z. B. ein Benutzername, der länger als 2 Zeichen ist), ist es weniger wahrscheinlich, dass ich überhaupt versuche, ungültige Eingaben einzugeben. Dies kann in Form eines Standardwerts für das Feld erfolgen, das bei der Eingabe automatisch gelöscht wird.

Geben Sie Ihre E-Mail-Adresse ein: [Beispiel: [email protected]] (Löscht den Fokus)

Dieser Standardwert kann entweder aus dem Feld "Wert" des Felds abgerufen oder auf der Clientseite basierend auf den erforderlichen Regeln generiert werden. Es hängt davon ab, wie viel Arbeit Sie möglicherweise investieren möchten.

  • Einige Benutzeroberflächen führen jetzt eine Grafik ein, die in der oberen Ecke des zu überprüfenden Eingabefelds angezeigt wird, um den Benutzern anzuzeigen, dass dies erforderlich ist (dies unterscheidet sich vom herkömmlichen * -Deroter), aber genauso effektiv ist.

Hoffe diese Hilfe,

Addy

AddyOsmani.com

3
Addy Osmani

Es gibt einen sehr guten Artikel von Luke Wroblewski auf A List Apart: Inline-Validierung in Webformularen . Es heißt, dass die Verwendung der Validierung während der Eingabe zu längeren Formularausfüllzeiten und Frustrationen führt.

Ich würde das Buch Web Form Design von Luke Wroblewski ( Amazon , Google Books ) vorschlagen. Es enthält Details zu Fehlermeldungen, Validierung, Hilfe und allen Themen im Zusammenhang mit Webformularen.

1
Zoltán Gócza