Beeindrucken Sie Ihre Webbesucher mit einer Echtzeit-Formularüberprüfung

Online-Formular

Der erste Eindruck, den Sie normalerweise als Benutzer einer Webanwendung haben, ist das Ausfüllen eines Webformulars. Ich bin erstaunt über die Anzahl der Webformulare, die keine Validierung haben oder darauf warten, dass Sie Ihren Formularinhalt einreichen, bevor Sie wissen, welche Probleme Sie möglicherweise haben.

Meine Faustregel lautet, dass alles, was nicht validiert ist, unterstützt wird. Alles, was vor dem Absenden des Formulars validiert werden kann, muss sein. Mit dem Aufkommen von Ajax können Sie sogar Daten vor der Übermittlung anhand Ihrer Datenbank validieren. Wählen Sie nicht den faulen Weg - Benutzer schätzen die Hilfe!

Hier sind einige Beispiele:

  1. E-mailadressen - Ich habe nichts gegen Formulare, mit denen Sie Ihre E-Mail-Adresse zweimal ausfüllen müssen, um sie zu validieren, aber die Tatsache, dass sie Ihnen nicht sagen, ob sie übereinstimmen oder angemessen konstruiert sind, ist unentschuldbar.
  2. Passwörter - Wenn Sie mich dazu bringen, zweimal ein Passwort einzugeben, überprüfen Sie bitte, ob die Werte identisch sind, bevor Sie das Formular senden.
  3. Passwortstärke - Wenn Sie eine bestimmte Kennwortstärke benötigen (Kombination aus alphanumerischen Zeichen oder Groß- / Kleinschreibung), geben Sie mir während der Eingabe meines Kennworts ein Feedback. Warten Sie nicht, bis ich es abschicke, bevor Sie mir mitteilen, dass es fehlgeschlagen ist.
  4. Termine - Wenn Sie das Datum im Format am / d / yyyy möchten, können Sie die Informationen in ein einzelnes Feld eingeben, indem Sie diese Werte eingeben und entsprechend formatieren. Wenn Sie führende Nullen möchten, geben Sie diese nachher ein. Es ist in Ordnung, ein Format anzuzeigen und ein anderes in Ihrer Datenbank zu speichern.
  5. Heutiges Datum - Füllen Sie es für mich aus! Warum bittest du mich, das Datum einzugeben, wenn du es bereits weißt?!
  6. Datumsformat - Wenn Sie eine internationale Bewerbung haben, können Sie ein Datumsformat festlegen, das auf der Internationalisierung Ihrer Bewerbung basiert. Natürlich ist es gut, eine Option zu haben, mit der Benutzer diese Option überschreiben und ihre eigene auswählen können.
  7. Sozialversicherungsnummern - Es ist ziemlich einfach, Javascript hinzuzufügen, das automatisch von Feld zu Feld springt oder programmgesteuert einen Bindestrich zwischen die Werte setzt.
  8. Telefonnummern - Unter Berücksichtigung der Internationalisierung können diese Arten von Feldern auch vereinfacht werden, indem die Telefonnummer in der Benutzeroberfläche formatiert, aber in einem anderen Format gespeichert wird, das für Ihr Back-End effizient ist. Lassen Sie Ihre Benutzer keine Klammern, Leerzeichen und Bindestriche eingeben.
  9. Maximale Textlänge - Wenn Sie die Anzahl der in Ihrer Datenbank gespeicherten Zeichen begrenzen, lassen Sie mich NICHT so viele Zeichen eingeben! Es erfordert nicht einmal eine schwierige Validierung. Es ist nur eine Einstellung im Textfeld.
  10. Minimale Textlänge - Wenn Sie eine Mindesttextlänge benötigen, schlagen Sie den Alarm aus, bis ich genügend Zeichen habe.

Hier ist ein Beispiel für eine Funktion zur Kennwortstärke von Geek Weisheit:

Geben Sie das Passwort ein:

UPDATE: 10 - Ich habe eine nette Ressource mit einer JavaScript-Bibliothek gefunden, die zum Download zur Verfügung steht Formularvalidierung mit dem Namen LiveValidation.

16 Kommentare

  1. 1

    Ich stimme zu, dass dies großartige Funktionen für Formulare sind, aber zu sagen, dass es "unentschuldbar" ist, keine Frontend-Javascript-Validierung durchzuführen, ist eher eine persönliche Meinung. Ich liebe es, mit Javascript zu arbeiten, und habe einige ziemlich nette Editiermasken geschrieben, um einige der Dinge zu tun, über die Sie sprechen, aber viele davon sind alles andere als trivial, und viele der JavaScript-Formularvalidierungspakete da draußen haben eine Reihe großer Lücken. Nicht jeder wird die Zeit investieren, um seine Backend-Validierung mit (häufiger) komplexerer Frontend-Javascript-Validierung zu duplizieren.

    Gute Punkte, aber definitiv nicht etwas, das meiner Meinung nach jedes Online-Formular "braucht".

  2. 2

    Die Passwortprüfung ist relativ defekt. Jedes Passwort ist gut genug, wenn es lang ist.

    Beispiel:

    Ist das wirklich ein mittelmäßiges Passwort?

    f46dffe6ff4ffgdfgfjfgyu656hfdt74tyhdtu5674yfgh6uhhye45herdhrt64684hythdfth54y54348fgdcvzse8cn984v3p4m6vq98476m3wuw89ewfucsd8fg67s4v8tw76u340m6tver7nt+s89346vs+0em9u+s+09hrtuhss586ysvne4896vb4865tbv089rt++

  3. 4

    Für mich ist die beste Formularvalidierung, wenn Sie dem Benutzer den Eindruck einer clientseitigen Validierung vermitteln, während es sich um eine AJAX / Server-seitige Validierung handelt.
    Sie müssen lediglich eine Ereignisbehandlung (Keyup, Unschärfe, Klick usw.) an Ihre Formularelemente anhängen, die das gesamte Formular über AJAX an den Server sendet und eine Überprüfungsfunktion aufruft, die die entsprechenden Fehlermeldungen zurückgibt (auch dieses Kennwort) einfach, dieses Datum hat ein falsches Format usw.)
    Wenn der Benutzer das Formular schließlich durch Klicken auf eine Senden-Schaltfläche veröffentlicht, können Sie die serverseitige Funktion "Überprüfen" weiterhin verwenden, um das Formular ein letztes Mal zu überprüfen, bevor Sie die Daten in eine Datenbank oder einen anderen Prozess einfügen.
    Auf diese Weise sind Benutzer mit der Onthego-Validierung zufrieden UND Entwickler sind mit der Nur-Server-Validierungsentwicklung zufrieden.

    • 5
      • 6

        Nicht so schnell Doug - Ich stimme Ihrer ursprünglichen Annahme zu, dass diese hilfreichen Funktionen, wie das Formatieren einer SSN im laufenden Betrieb, trivial sind. Und es ist faul, einfach eine Nachricht zu posten, die falsch ist, wenn Sie sie beheben können, ohne das Format erraten zu müssen.

        Ich stimme jedoch auch Nicolas hinsichtlich der Verwendung der serverseitigen Logik in Verbindung mit AJAX zu.

  4. 7

    Ihr Titel lautet "Beeindrucken Sie Ihre Freunde ...", aber Sie beeindrucken mich nicht mit diesen 2 Minuten, die per Post angerufen wurden.

    Schreiben Sie Ihren Titel neu (zu irreführend, lässt einen denken, dass Beispiele und Praktiken diskutiert werden).

    Wenn die Leute dies nicht bereits in ihren Formularen tun, dann lernen sie nur oder das Formular ist nicht wichtig genug, um die Validierung zu verwenden.

    Echte Webprogrammierer wissen das bereits und tun es.

    • 8

      Jay,

      Das tut mir leid! Es ging mir definitiv nicht darum, Entwickler-Feedback zu geben – ich kam wirklich aus der Sicht eines Produktmanagers. Ich stimme Ihnen zu – aber es ist interessant, dass einige andere Entwickler dies nicht tun! Das finde ich schade.

      Danke, dass du dir die Zeit genommen hast!
      Doug

  5. 9

    Ich stimme voll und ganz zu, dass die Validierung ein notwendiger Bestandteil jeder Anwendung ist. Als Teamleiter sende ich normalerweise Code zurück, um aus Gründen wie fehlenden Validierungen oder Einschränkung der Texteingabelängen „fertig“ zu sein.

    Bei den meisten Dingen, an denen ich arbeite, dauert es ungefähr 50% der Zeit, bis etwas funktioniert, unter normalen Bedingungen und wenn Benutzer das System so verwenden, wie ich es beabsichtigt habe. Die anderen 50% der Entwicklungszeit entfallen auf die Überprüfung ihrer Eingaben, die Gewährleistung der Datenintegrität und die Eingabe von schädlichen Daten in den Formularfeldern.

    Ich habe einen Beitrag darüber geschrieben, wie ich InputVerifiers in meinen Hava Swing-Apps verwende, und gezeigt, wie ich ein E-Mail-Textfeld überprüfe. Der reguläre Ausdruck, den ich verwende, kann leicht geändert werden, um Telefonnummern, Postleitzahlen, SSNs usw. zu überprüfen.

    Mein Blogbeitrag ist bei http://timarcher.com/?q=node/36

    Gute Nachricht Doug!

  6. 10

    Genau. Passwörter sind sehr wichtig und müssen ernst genommen werden. Ich denke, es ist nur normal, dass fast alle Formulare das Passwort zweimal eingeben, aber wenn die Gültigkeit der beiden Passwörter nicht angezeigt wird, wird dies nicht ernsthaft in Betracht gezogen.

  7. 11

    Ich bin damit einverstanden, dass die Client-Validierung eine sehr benutzerfreundliche Funktion sein kann. Es ist jedoch wichtiger sicherzustellen, dass die Validierungen selbst tatsächlich sinnvoll sind.

    Sie haben ein hervorragendes Beispiel dafür geliefert, wie die Validierung Benutzer irreführen und, schlimmer noch, sie von unserer Website vertreiben kann:

    Die Überprüfung der Passwortstärke von Geek Wisdom wird berücksichtigt tZhKwnUmIss ein schwaches Passwort sein. Dies ist nicht nur ein perfektes Passwort, sondern es entfremdet auch Benutzer, da es den falschen Eindruck erweckt, dass die Anmeldung bei Ihrer Website mit diesem Passwort irgendwie unsicher ist.

    Es wäre viel besser (und einfacher), Benutzer einfach darauf hinzuweisen, dass ein gutes Passwort mindestens sechs Zeichen lang ist und sowohl Zahlen als auch Buchstaben enthalten sollte.

    Andere fragwürdige Überprüfungen umfassen Benutzernamen, die eine bestimmte Mindestlänge benötigen oder möglicherweise keine Leerzeichen enthalten. Was ist los mit den Benutzernamen X, John Doe, oder auch # *! §? Ich kann das bewerkstelligen.

  8. 12

    Ich stimme mit Ihnen ein. Einige Formulare sehen gut aus, bieten jedoch keine gute Validierung. Persönliche Informationen werden angegeben und es ist nur richtig, sie ernst zu nehmen, genau wie alle Geschäftsformulare in Papierform.

  9. 13
  10. 14
  11. 15

    Ich finde es ein wenig amüsant, dass Sie über die Güte der Echtzeit-Formularvalidierung schreiben, und dennoch bietet Ihr Kommentarformular am Ende des Beitrags nichts davon…

    Mir ist klar, dass Sie WordPress verwenden, um Ihre Gedanken ins Internet zu bloggen, aber vielleicht ist es auch keine so schlechte Idee, sicherzustellen, dass Sie das praktizieren, was Sie predigen. 🙂

    Übrigens ein guter Beitrag, auch wenn ich nicht unbedingt mit allem einverstanden bin, was Sie geschrieben haben.

    • 16

      Doh! Du hast mich kaputt gemacht, Amanda! Ich wünschte, ich hätte Zeit, um eine bessere Formularvalidierung durchzuführen und sie in WordPress zu integrieren. das gefällt mir besonders gut Adobe-Spry Validierungsrahmen und würde gerne jemanden sehen, der die beiden integriert!

      Vielen Dank! (Und ich weiß es immer zu schätzen, dass es zu jedem Thema mehrere Meinungen gibt).
      Doug

Was denken Sie?

Diese Seite verwendet Akismet, um Spam zu reduzieren. Erfahren Sie, wie Ihre Kommentardaten verarbeitet werden.