Anzeige
Tutorialbeschreibung

Praxisfälle für JavaScript/DOM - Clientseitige Formularüberprüfung

Praxisfälle für JavaScript/DOM - Clientseitige Formularüberprüfung

In Kapitel 7 wurden zwar schon diverse für die Praxis nützliche Scripts vorgestellt, dochdie Beispiele hatten dort unterstützenden Charakter, um bestimmte Sprachkonzepte zuerläutern. In diesem Kapitel sollen die Beispiele im Vordergrund stehen. Das Kapitel zeigt,wie praxistypische Scripts entstehen und was dabei berücksichtigt werden sollte.Wir konzentrieren uns auf drei wirklich nützliche Anwendungen, die JavaScript auch fürprofessionelle Seiten salonfähig macht. Das Kapitel hat Workshop-Charakter.


Das nun folgende Tutorial ist ein Auszug aus dem Buch: Professionelle Websites von Stefan Münz.
Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von Pearson Education.



Link zu JavaScript-Sammlungen:
Michael Mailer’s JavaScripts:
http://www.mywebaid.de/
Scriptindex – JavaScript:
http://www.scriptindex.de/scripts/8/javascript/kat.php
JavaScript Source:
http://javascript.internet.com/toc.html



1 Clientseitige Formularüberprüfung

Bei Webanwendungen mit serverseitiger Datenanbindung erfolgt die Interaktion mit dem Anwender in der Regel über Formulare in HTML. Durch seine Angaben im Formular löst der Anwender nach Absenden des Formulars auf dem Webserver eine Datenverarbeitung aus. So wird beispielsweise ein Suchvorgang gestartet oder eingegebene Daten werden in eine Datenbank geschrieben oder in Dateiform gespeichert.
Auch wenn ein Formular so gestaltet ist, dass ein Anwender weiß, wie er es korrekt und sinnvoll ausfüllt, so kommt es doch immer wieder vor, dass Anwender bewusst Unsinn in ein Formular schreiben und es absenden oder dass sie ein wichtiges Feld vergessen auszufüllen oder – was am schlimmsten ist – dass sie versuchen, durch gefährliche Eingaben dem Server Schaden zuzufügen.

Bevor Anwendereingaben verarbeitet werden, sollten diese daher stets überprüft werden: Sind die Angaben vollständig bzw. sind alle wichtigen Felder ausgefüllt? Enthalten sie offensichtlichen Unsinn wie z.B. numerisch nicht interpretierbare Werte in einem Feld, in dem eine Zahl eingegeben werden soll? Enthalten sie Werte, die aus Server-Sicht problematisch sein können? (Wenn z.B. 1 Mio. Datensätze durchsucht werden und alle gefundenen Sätze in einem Rutsch ausgegeben werden, ist es problematisch, wenn ein Anwender nur nach dem Buchstaben »a« sucht.)

Nun gibt es zwei Orte, an denen eine Überprüfung von eingegebenen Formulardaten stattfinden kann: Der eine Ort ist das Script, welches auf dem Server die Formulardaten empfängt und die Daten verarbeitet. Der Vorteil bei dieser Lösung ist, dass sie browserunabhängig ist und in jedem Fall funktioniert. Der Nachteil ist, dass zusätzliche Client- Server-Kommunikation zwischen Browser und Server nötig ist, falls Unzulänglichkeiten bei den Formulardaten festgestellt werden. Das Handling für den Anwender ist einfach umständlicher.

Der andere mögliche Ort einer Formularüberprüfung ist ein JavaScript, welches zusammen mit dem Formular an den Browser übertragen wird. Das Script wird dann aufgerufen, wenn der Anwender das Formular absenden will. Sind alle Eingaben in Ordnung, werden die Daten an den Server gesendet. Stellt das Script Fehler fest, kann der Anwender diese gleich korrigieren. Der Vorteil dieser Lösung ist also, dass bei Unzulänglichkeiten keine zusätzliche Client-Server-Konfiguration erforderlich ist und dass die Rechenkapazitäten des Anwenders mit der Eingabeprüfung belastet werden, statt die des Servers. Der Nachteil ist, dass bei deaktiviertem JavaScript keine Überprüfung stattfindet und die Daten ungeprüft zum Server gelangen.
In der Praxis ist daher eine doppelte Prüfung am realistischsten, wobei sich die serverseitige Prüfung auf problematische Fälle beschränken kann, während die clientseitige Prüfung auch den Charakter eines Hilfe-Assistenten annehmen kann.

1.1 Das Beispiel

In unserem Beispiel zur Formularüberprüfung mit JavaScript soll es um die Bestellung eines Horoskops gehen. Mit der Anmeldung geht der Anwender einen Kaufvertrag ein. Diverse Angaben sind zur Abwicklung Pflicht und einige davon müssen einem bestimmten Datenmuster entsprechen. Ein Script soll die Vollständigkeit und Korrektheit der Daten prüfen, bevor das Formular zum Server gesendet wird.

1.2 Quelltexte und Erläuterungen

Zunächst der Quelltext des HTML-Dokuments. Der script-Bereich zur Formularüberprüfung ist darin bereits vorgesehen, doch der Script-Code ist noch nicht eingefügt. Den Java- Script-Code werden wir noch separat behandeln. Im Quelltext des HTML-Dokuments sollen zunächst die Felder vorgestellt werden, die später mittels JavaScript auf Korrektheit überprüft werden sollen.

Bilder

Abbildung 8.1: Formular zur Bestellung eines Horoskops

Listing 8.1: HTML-Quelltext mit Formular
Bilder

Den Quelltext der CSS-Datei sparen wir an dieser Stelle aus, da er nicht von Belang ist.

Das HTML-Formular hat einen praxistypischen Umfang. Bei den Eingabefeldern soll Folgendes überprüft werden:

- Alle Feldgruppen mit Radiobuttons müssen jeweils eine gültige Auswahl enthalten.
- Wenn als Art des Horoskops Einzelhoroskop ausgewählt wurde, müssen alle Felder im Bereich Horoskop für einen Inhalt aufweisen. Wenn als Horoskopart Partnerhoroskop ausgewählt wurde, müssen sowohl im Bereich Horoskop für als auch im Bereich Bei Partnerhoroskop alle Felder ausgefüllt sein.
- Eingaben in Feldern für Vor- und Zuname sollen nicht mehr als 60 Zeichen haben dürfen, weil sie z.B. in eine Datenbank mit so begrenzten Feldlängen übernommen werden sollen.
- In den Einzelfeldern für Geburtstag und Geburtszeit müssen gültige Werte eingetragen werden: Monatstage zwischen 1 und 31, Monate zwischen 1 und 12, Jahr vierstellig, Stunden zwischen 0 und 23 und Minuten zwischen 0 und 59. Ferner soll geprüft werden, ob die Angaben zum Geburtsdatum ein gültiges Kalenderdatum ergeben.
- In den Einzelfeldern für Längengrad, Längenminuten, Breitengrad und Breitenminuten müssen ebenfalls gültige Werte eingetragen werden, also Längengrade zwischen 0 und 180, Breitengrade zwischen 0 und 90, Längen- und Breitenminuten zwischen 0 und 59 und in den Feldern für die Richtung ein Wort wie Ost oder West bzw. Nord oder Süd.
- Die Felder für den Geburtsort dürfen nicht mehr als 100 Zeichen haben. Die Felder für Adressat und Lieferanschrift dürfen nicht mehr als 160 Zeichen haben.

Bei Fehlern soll ein Meldungsfenster das aufgetretene Problem ausgeben. Im Fall von Eingabefeldern soll anschließend der Cursor direkt in das Feld mit der fehlenden oder fehlerhaften Eingabe positioniert werden, damit der Anwender den Wert gleich korrigieren kann.

Da diverse Checks öfter vorkommen, z.B. die Überprüfung eines Werts daraufhin, ob er sich in einem bestimmten numerischen Bereich von/bis bewegt, strukturieren wir den JavaScript-Code so, dass einzelne, wiederverwendbare Funktionen bestimmte Prüfungen vornehmen und lediglich zurückgeben, ob die Eingabe den Prüfungskriterien entspricht (true) oder nicht (false).

Zum Management der einzelnen Fehler spendieren wir ebenfalls eine eigene Funktion. Eine Zentralfunktion schließlich geht die einzelnen Felder durch.
Zunächst zu den wiederverwendbaren Einzelfunktionen, die bestimmte Arten von Prüfungen vornehmen oder eine Hilfsfunktionalität leisten:

Listing 8.2: Wiederverwendbare Einzelfunktionen für Formularüberprüfung
Bilder


Folgende Funktionen sind in diesem Listing enthalten:

- check_radios(): Prüft, ob von einer Gruppe von Radiobuttons einer aktiviert ist. Erwartet als Parameter den gemeinsamen Wert des name-Attributs einer Gruppe von Radiobuttons. Ist einer der Buttons aktiviert, wird true zurückgegeben, wenn nicht, dann false.
- check_field_length(): Prüft, ob die Anzahl Zeichen in einem Feld einen bestimmten Wert nicht überschreitet. Erwartet als ersten Parameter den Wert des name-Attributs des Eingabefelds und als zweiten Parameter die maximal erlaubte Anzahl Zeichen. Ist die Eingabe nicht länger als erlaubt, wird true zurückgegeben, andernfalls false.
- check_field_min_length(): Prüft, ob in einem Feld mindestens eine bestimmte Anzahl Zeichen eingegeben wurden. Erwartet als ersten Parameter den Wert des name-Attributs des Eingabefelds und als zweiten Parameter die Mindestanzahl von Zeichen, die das Feld enthalten sollte. Ist die Eingabe mindestens so lang wie angegeben, wird true zurückgegeben, andernfalls false.
- check_field_str_range(): Prüft, ob ein Feld einen Zeichenkettenwert aus einem bestimmten Bereich erlaubter Werte enthält. Erwartet als ersten Parameter den Wert des name-Attributs des Eingabefelds und als zweiten Parameter eine Zeichenkette, welche die erlaubten Werte enthält, wobei die einzelnen Werte durch Kommata voneinander getrennt sein müssen. Kommt der eingegebene Feldwert in den erlaubten Werten vor, wird true zurückgegeben, wenn nicht, dann false.
- check_field_int_range(): Prüft, ob ein Feld einen Ganzzahlwert aus einem bestimmten Bereich enthält. Erwartet als ersten Parameter den Wert des name-Attributs des Eingabefelds, als zweiten Parameter den Mindestwert des erlaubten Bereichs und als dritten Parameter den Höchstwert des erlaubten Bereichs. Kommt der eingegebene Feldwert im erlaubten Bereich vor, wird true zurückgegeben, wenn nicht, dann false.
- check_valid_date(): Prüft, ob ein Datum, bestehend aus Tag, Monat und Jahr, kalendarisch gültig ist. Erwartet als ersten Parameter den Wert für »Tag«, als zweiten den für »Monat« und als dritten den für »Jahr«. Alle Parameter müssen bereits numerisch übergeben werden. Ist das Datum kalendarisch korrekt, wird true zurückgegeben, wenn nicht, dann false.
- point_to(): Setzt den Cursor in ein bestimmtes Eingabefeld. Erwartet als Parameter den Wert des name-Attributs des gewünschten Eingabefelds.
- parse0int(): Hilfsfunktion, die Eingaben wie 08 oder 09 in numerischen Feldern davor bewahrt, von JavaScript als Fehler interpretiert zu werden. Wird im Script anstelle der Standardfunktion parseInt() aufgerufen.

Erkennbar ist, dass die Funktionen die Aufgabenstellungen widerspiegeln. Die einzelnen Check- Funktionen tun noch nichts weiter, als ihre Prüfung vorzunehmen und true oder false zurückzugeben. Erst die aufrufende Funktion entscheidet dann, was auf Grund des Rückgabewerts zu tun ist. Dies ist typisch funktionsorientiertes Programmieren nach dem Vorbild von C. JavaScript ist für eine solche Art von Programmierung bestens geeignet.

Alle Check-Funktionen greifen über die Methode document.getElementsByName() auf die Feldinhalte zu. Das bietet sich an, da die Formularfelder ohnehin ein name-Attribut erhalten müssen, welches für die spätere Datenverarbeitung auf dem Server von Bedeutung ist. Die Check- Funktionen greifen stets auf document.getElementsByName()[0] zu, da sie davon ausgehen, dass alle name-Attribute von Eingabefeldern dokumentweit eindeutig sind. Nur bei Radiobuttons, die jeweils eine Gruppe bilden, liegt der Fall anders.

Zur Funktion check_valid_date() ist noch anzumerken, dass sie das übergebene Jahr prüft und nur einen Wertebereich von 1801 bis 2799 zulässt. Dieser Wertebereich ist nicht streng begründbar, aber auch nicht willkürlich. Dahinter stehen Argumentationen rund um die Verbreitung und die künftige Korrektheit des gregorianischen Kalenders. Und für unser Horoskop-Beispiel sollte dieser Wertebereich allemal ausreichen. Die Funktion prüft ansonsten noch, ob der angegebene Monat überhaupt so viele Tage hat wie als Monatstag angegeben. Dabei werden, was den Februar betrifft, auch Schaltjahre inklusive 100-Jahresund 400-Jahres-Regelung berücksichtigt. Ferner wird überprüft, ob der Monat sich im gültigen Bereich zwischen 1 und 12 befindet.

Die Funktion point_to() wird vom Fehlerhandling bei Auftreten eines Fehlers aufgerufen, um den Cursor nach Aufforderung des Anwenders zur Korrektur in das gewünschte Feld zu positionieren. Dabei wird die focus()-Methode verwendet, die auf HTML-Formularelemente anwendbar ist.

Ein Problem, das schon einige JavaScript-Programmierer fast verzweifeln ließ, ist, wenn die Standardmethode parseInt() auf eine Formulareingabe angewendet wird und deren Inhalt mit 08 oder 09 beginnt. In unserem Fall kann genau das sehr häufig vorkommen, da zahlreiche Anwender beim Ausfüllen von Tag, Monat, Stunde und Minute führende Nullen eingeben. Das Problem bei parseInt() besteht darin, dass es Werte mit führender 0 als Oktalwert interpretiert. Die Folgen 08 und 09 sind dann aber ungültig, da Oktalzahlen nur aus den Ziffern 0 bis 7 bestehen können. Mithilfe unserer »Tricky«-Funktion parse0int() lösen wir dieses Problem. Die Funktion multipliziert einfach den ihr übergebenen Wert mit 10. So wird aus 08 der Wert 80. Dieser Wert wird dann wieder durch 10 dividiert, was 8 ergibt. Dadurch ist ein ordentlicher numerischer Wert erreicht.

Damit kommen wir zur Funktion, welche das Fehlerhandling übernimmt:

Bilder


Die Funktion, handle_error(), bekommt beim Aufruf einfach eine Fehlernummer übergeben. Der längere Array aus Fehlermeldungstexten ist so definiert, dass aufgrund der übergebenen Fehlernummer die gleichlautende Array-Indexnummer die zugehörige Fehlermeldung liefert. Mit der alert()-Methode wird die so ermittelte Meldung im Anschluss an den Array auch gleich ausgegeben. An diesem Moment der Script-Ausführung bekommt der Anwender also einen bei der Eingabeprüfung aufgetretenen Fehler in einem Meldungsfenster angezeigt.

Anschließend soll in das betroffene Feld positioniert werden, damit der Anwender den genannten Fehler gleich korrigieren kann. Dazu muss die Funktion auch wieder alle denkbaren Fehlernummern einzeln unterscheiden. Das tut sie in einem switch-case-Konstrukt. Abhängig von der übergebenen Fehlernummer wird in das zugehörige Feld positioniert.

Am Ende gibt die Funktion handle_error() den Wert false zurück. Das ist nicht unwichtig, wie wir gleich noch sehen werden. Die Funktion handle_error() ist nämlich so programmiert, dass sie von der eigentlichen Zentralfunktion der Formularüberprüfung, nämlich der Funktion check_form(), optimal bedient werden kann. Zum Schluss noch der Code der zentralen Funktion:

Bilder

Die Zentralfunktion check_form() geht der Reihe nach alle Felder des Formulars durch. Entsprechend der Vorgaben ruft sie eine der wiederverwendbaren Einzelfunktionen zur Überprüfung des jeweiligen Feldinhalts auf. Den Rückgabewert dieser Funktionen speichert sie in der Variablen chk. Nach jedem Aufruf dieser Art wird mit if(chk == false) geprüft, ob die Einzelprüfung des jeweiligen Feldinhalts einen Fehler ergeben hat. Ist das der Fall, so wird eine return-Anweisung ausgeführt. Als Wert wird der return-Anweisung ein Aufruf der Funktion handle_error() übergeben, und zwar mit der gewünschten Fehlernummer. Die Funktion handle_error() sorgt, wie bereits bekannt, für die Ausgabe der zugehörigen Fehlermeldung und für die Korrekturpositionierung ins zugehörige Feld. Da handle_error() am Ende den Boolean-Wert false zurückgibt, bedeutet ein Konstrukt wie return(handle_error(44)) letztlich auch nur return(false).

Der Vorteil dieser Konstrukte ist, dass die Funktion check_form() sofort nach Erledigung der Arbeiten von handle_error() beendet wird. Der Rückgabewert false landet beim aufrufenden Event- andler onsubmit im einleitenden <form>-Tag. Dieser gibt ihn ebenfalls wieder mit return weiter:

<form id="order" action="horoskop2.htm" method="post"
onsubmit="return(check_form())">

Damit wird der false-Wert an den Browser selbst geleitet. Dieser reagiert so, dass das Formular nicht abgesendet wird, was ja im Fehlerfall wichtig ist.

Fazit
Das Beispiel zeigt, dass bei ordentlichen Prüfungen von Formularfeldinhalten schnell eine ganze Menge Script-Code entstehen kann. Nutznießer davon sind jedoch einerseits der Anwender, der im Fehlerfall präzise Meldungen erhält und gleich das betreffende Feld korrigieren kann, und der Seitenanbieter, der ordentlich verarbeitbare Daten zum Server übertragen bekommt.

 

Das Tutorial ist ein Auszug aus dem Buch von Stefan Münz:

Professionelle Websites - Programmierung, Design und Administration von Webseiten
Addison-Wesley, 2. Auflage, 1136 Seiten, gebunden, komplett in Farbe, mit DVD

Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von
Pearson Education.

Mehr Informationen zu diesem wunderbaren Fachbuch für Webmaster und Webentwickler
gibt es hier: Professionelle Websites

Alle Teile des Buches: 

1 Intro
2 HTML und CSS
3 Dynamische Seiten mit JavaScript/DOM
4 Die Server-Seite
5 PHP und MySQL
6 XML
7 Betrieb von Websites
8 Referenz
Bilder

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von MaoMao
  • 09.01.2013 - 16:54

Gute Tutorial leicht erklärt.

Portrait von JusTTT68
  • 20.12.2009 - 17:26

Also, es ist zwar detailiert und verständlich dokumentiert, doch das Beispiel ist etwas übertrieben groß, man hätte evtl ein Beispiel nehmen sollen, das nicht so viele input felder beinhaltet!

Meine Meinung als jmd der schon Erfahrung hat mit JavaScript und auf ''neues'' stoßen will, empfinde eine ewige Liste von 20x if(wert==false) total übertrieben, es hätte auch gereicht ein Formular bzw eine Idee zu nutzen wo 3-5 unterschiedliche Inhalte besitzt, ausgereicht um es ausreichend zu beschreiben und zu verdeutlichen wie es funktioniert und welche Dinge zu beachten sind.

Trotzdem ist es wenigstens detailiert und verständlich erklärt, das muss ich wenigstens positiv bewerten.

x
×
×