Eine Einführung in Methoden zur Formularvalidierung

Wie die meisten von Ihnen bereits wissen, sind Formulare eine hervorragende Möglichkeit, Informationen von Ihren Besuchern zu sammeln und ihnen die Übermittlung von Informationen an Ihre Webserver zur Verarbeitung auf Ihrer Website zu ermöglichen. In der Regel umfasst dies eine Datenbankverbindung zum Bereitstellen, Verarbeiten und Erstellen von Datensätzen zum Speichern der Informationen. Mithilfe von Formularen können Ihre Kunden auch mit Ihrer Website interagieren, indem sie beispielsweise nach bestimmten Informationen suchen oder Kommentare an eine bestimmte Abteilung oder E-Mail-Adresse senden. Häufig möchten Sie sicherstellen, dass Kunden bestimmte Formularfelder nicht leer lassen, oder Sie möchten ein Feld auf eine bestimmte Art von Eingabe beschränken, z. B. Zeichen, Zahlen, E-Mail-Adresse, Postleitzahl, Telefonnummer, oder eine Liste voreingestellter Optionen aus einem Pulldown-Menü.

Dieser Artikel ist Teil einer mehrteiligen Reihe, in der verschiedene Methoden zur Verwendung der Formularvalidierung, Fehlermeldungen, Feedback-Techniken und Ansätze für die Implementierung der Website-Formularvalidierung untersucht werden.

In einer perfekten Welt geben Ihre Webbesucher die richtigen und notwendigen Informationen ein und beenden die Aufgabe erfolgreich. In der realen Welt machen Menschen jedoch häufig Fehler oder missbrauchen den Prozess, und hier tritt die Formularvalidierung auf. Das Endergebnis besteht darin, sicherzustellen, dass die Besucher die richtigen und korrekt formatierten Informationen zum Ausfüllen des Formulars bereitstellen.

Serverseitige Validierungsskripte stützen sich nicht auf die JavaScript-Unterstützung im Webbrowser des Benutzers. Folglich sind sie von der Anwesenheit oder Abwesenheit von JavaScript-Unterstützung im Webbrowser des Benutzers nicht betroffen. Bei der serverseitigen Validierung werden Informationen an den Server gesendet und in einer von vielen serverseitigen Sprachen validiert. Wenn die Validierung fehlschlägt, wird die Antwortnachricht an den Client zurückgesendet, und die Seite, die das Webformular enthält, wird aktualisiert und eine Feedbacknachricht wird angezeigt. Dies ist eine sicherere Methode und funktioniert auch dann, wenn JavaScript im Browser deaktiviert ist und von Benutzern mit böswilliger Absicht nicht einfach umgangen werden kann. Der Nachteil bei der serverseitigen Validierung besteht darin, dass Benutzer die Informationen nur eingeben müssen, ohne eine Antwort zu erhalten, bis sie auf die Schaltfläche "Senden" klicken. Dies führt normalerweise zu einer langsameren Gesamtantwortzeit für die Benutzererfahrung.

Eine Ausnahme zur typischen serverseitigen Validierung ist die Verwendung von Ajax-Aufrufen an den Server unter Verwendung von jQuery. Während der Benutzer die Informationen eingibt, gibt es sofortiges Feedback zur Formularvalidierung. Mit Ajax in Verbindung mit der clientseitigen Validierung können Formulare bei der Formularübermittlung präventiv mit denselben clientseitigen Regeln validiert werden.

Die clientseitige Validierung mit JavaScript bietet eine insgesamt bessere Endbenutzererfahrung, da die Benutzereingaben während der Eingabe validiert werden können und eine sofortige Rückmeldung mit einer fehlgeschlagenen Bestätigung gesendet wird. Ein Nachteil der clientseitigen Validierung besteht jedoch darin, dass bei einigen Besuchern die JavaScript-Unterstützung in ihrem Browser absichtlich oder unwissentlich deaktiviert ist. Solche Benutzer können JavaScript-Validierungsroutinen umgehen und ein Formular senden, unabhängig davon, ob es die Validierungsregeln erfüllt.

Um zu verhindern, dass "Garbage" -Formularübermittlungen von Besuchern eingehen, ergänzen Webanwendungsentwickler in der Regel die clientseitige JavaScript-Validierung durch serverseitige Validierungsskripts. Die meisten Webanwendungen verwenden heutzutage sowohl die clientseitige Validierung mit JavaScript als auch die serverseitige Validierung, z. B. ColdFusion- und Perl / CGI-Validierungsroutinen, um Probleme mit vom Benutzer eingegebenen Formulardaten zu erkennen und somit die Übermittlung falscher Daten zu verhindern.

Es gibt verschiedene Arten der Validierung, die Sie durchführen können. Diese fallen normalerweise in eine von drei Kategorien, einschließlich der erforderlichen Informationen, des korrekten Formats und der Bestätigung.

Der erste Satz von Informationen, der validiert werden sollte, sind die erforderlichen Informationen. Dies wird normalerweise entweder mit einem Sternchen (*) oder einer "erforderlichen" Anweisung neben dem Feld angezeigt oder vor dem Formular deklariert. Sofern nicht alle Felder erforderlich sind, sollte eine solche Angabe erfolgen, um den Besuchern die richtige Anweisung zum Ausfüllen der Formularfelder zu geben.

Bei universellem Design und Zugriff sollten die erforderlichen Dateneingabefelder klar und konsistent von optionalen Dateneingabefeldern unterschieden werden. Der klassifizierte Standard sollte Folgendes enthalten:

  • Geben Sie für alle erforderlichen Felder ein Sternchen (*) vor dem Etikett an und fügen Sie eine Anweisung vor dem Beginn des Dateneingabeformulars ein, z. B. "Ein Feld mit einem Sternchen (*), bevor es ein Pflichtfeld ist".
  • Geben Sie für jedes erforderliche Feld das Wort "erforderlich" vor oder unter dem Etikett an. Zusätzlich sollte am Anfang des Dateneingabeformulars eine Erklärung mit den erforderlichen Feldern angegeben werden. Beispiel: "Alle erforderlichen Felder werden mit dem Wort" erforderlich "zusammen mit der Beschriftung angezeigt.
  • Trennen Sie die optionalen und erforderlichen Felder gegebenenfalls und praktisch. Alle Gruppierungen sollten entsprechend mit "Erforderlich" oder "Optional" gekennzeichnet sein, um den Endbenutzer zu unterstützen.
Bei der Einhaltung von Abschnitt 508 (Web Compliance Framework, Abteilung für Gesundheit und menschliche Dienste) reicht die Verwendung von Farbe oder Fettdruck zur Hervorhebung der erforderlichen Felder nicht aus, um sie von optionalen Feldern zu unterscheiden. Benutzer von Farbenblindheit oder Benutzer von Bildschirmleseprogrammen unterscheiden nicht zwischen erforderlichen oder optionalen Dateneingabefeldern basierend auf Farbe oder Fettdruck. Das Beispiel in Abbildung A zeigt, wie erforderliche Felder mit einem Sternchen (*) gekennzeichnet sind.

Abbildung A.

Das korrekte Format überprüft, ob URLs, Telefonnummern, E-Mail-Adressen, Nummern, Kennwörter und andere Informationen in der akzeptablen Syntaxkonfiguration eingegeben wurden. Während es verlockend ist, das Format und die Syntax für bestimmte Datentypen einzuschränken, empfiehlt es sich manchmal, eine Vielzahl von Formaten zuzulassen, die es der Anwendung ermöglichen, die Daten zu interpretieren, und daher ein fehlerverzeihendes Entwurfsmuster für Benutzereingaben zu verwenden. In dem in Abbildung B von iStockphoto.com gezeigten Beispiel überprüft das Anmeldeformular die E-Mail-Adresse und das Kennwort und enthält eine Fehlermeldung sowie Vorschläge zur Korrektur der Einträge mit sofortiger Rückmeldung vor dem Absenden.

Abbildung B.

Bestätigungsfelder stellen sicher, dass Benutzer die eingegebenen Daten mit zwei Feldern bestätigen, die für dieselben Informationen bereitgestellt werden. Beispielsweise erfordern Kennwörter und E-Mail-Adressen normalerweise eine doppelte Eingabe, um die Richtigkeit zu bestätigen. In der Regel werden diese doppelten Felder direkt nebeneinander platziert und deutlich gekennzeichnet, damit der Benutzer ihren Zweck im Voraus kennt. Wenn die beiden Einträge übereinstimmen, wird das Formular erfolgreich gesendet. Wenn nicht, sollte eine Fehlermeldung anzeigen, dass die beiden Einträge unterschiedlich sind. Ein gutes Beispiel für die Bestätigung von Feldern ist in Abbildung C aus Angies Liste dargestellt.

Abbildung C.

Die meisten Web-Authoring-Tools verfügen normalerweise über leistungsstarke integrierte Funktionen, mit deren Hilfe Validierungsfelder in einem Formular erstellt werden können, mit denen sichergestellt wird, dass die Felder von den Online-Benutzern ordnungsgemäß ausgefüllt werden. In Dreamweavers Validate Form Behaviour wird beispielsweise JavaScript verwendet, um die Regeln zu erzwingen, die Sie für ein bestimmtes Webdokumentformular angeben. Wenn ein Website-Benutzer versucht, ein Formular mit leeren Feldern zu senden, und / oder unangemessene Daten eingegeben hat, wird ein Popup-Fenster mit einer Fehlermeldung angezeigt, in der das spezifische Problem angezeigt wird. Dies führt dazu, dass die Formularübermittlung bis abgebrochen oder vorübergehend angehalten wird Das Problem wurde behoben. Sobald der Benutzer die Korrekturen vorgenommen hat und die von Ihnen festgelegten Validierungsregeln mit dem Validierungsverhalten erfüllt wurden, wird das Formular erfolgreich gesendet.

Die meisten integrierten Validierungswerkzeuge, einschließlich Dreamweavers Validate Form Behavior, können nur den Inhalt von Textfeldern validieren und nicht überprüfen, ob der Benutzer die richtigen Optionsfelder, Kontrollkästchen, Dropdown-Listen usw. ausgewählt hat. Sie können das Formularverhalten validieren verwenden, um sicherzustellen, dass Textfelder die folgenden Kriterien und Bedingungen erfüllen:

  • Nur Zahlen enthalten. Sie können eine Formularübermittlung ablehnen, wenn ein Textfeld etwas anderes als Ziffern enthält.
  • Hat einen numerischen Wert innerhalb eines Bereichs. Sie können eine Formularübermittlung ablehnen, wenn die Nummer in einem Textfeld außerhalb des angegebenen Bereichs liegt.
  • Enthalten Sie eine E-Mail-Adresse. Es ist jedoch wichtig zu beachten, dass bei der Validierung in der Regel nur das Vorhandensein eines @ -Symbols in der E-Mail-Adresse überprüft wird und nicht überprüft wird, ob es sich um eine ordnungsgemäß erstellte E-Mail-Adresse wie _name.com handelt
  • Enthält etwas. Sie können eine Formularübermittlung ablehnen, wenn im Textfeld keine Informationen vorhanden sind.

Im nächsten Abschnitt werde ich zeigen, wie in den Beispielen ein einfaches Formular erstellt wird, mit dem mehrere verschiedene Textfelder innerhalb einer Webdokumentseite mithilfe von Dreamweaver überprüft werden können.

Zukünftige Segmente werden sich eingehender mit den Codierungsmethoden für die Formularvalidierung befassen sowie das Validierungsfeedback, die Validierung beim Senden, die Echtzeitvalidierung, das Hinzufügen hilfreicher Hinweise, dynamischer Tipps, das Maskieren und Neuformatieren von Benutzereingaben sowie das Hinzufügen von Captcha-Code, um die Benutzeroberfläche sicherzustellen. Ich werde dann eine Liste der Ressourcen zur Formularvalidierung zusammenstellen. Lassen Sie mich wissen, wenn Sie im folgenden Diskussionsbereich bestimmte Fragen zur Formularvalidierung haben.

© Copyright 2021 | pepebotifarra.com