JavaScript-Workshop
Übung 8
Formulare ja, aber möglichst korrekt

Die folgende Übung dient dem Verständnis einer umfangreichen Formularüberprüfung, deren genaues Durcharbeiten wir Ihnen vorschlagen. Diese unterscheidet sich von der folgenden Übung in zwei Aspekten. Zum einen ist der Umfang der zu überprüfenden Komponenten erheblich viel größer. Zum anderen kann jede Überprüfung mit einem eigens dafür eingebauten Button einzeln vorgenommen werden. Sie finden die Datei auf der Seite der Moderatoren vom linken Niederrhein unter http://www.bauer.demon.nl/san-ndrh.html

Mit einem Formular ist hier eine HTML-Seite gemeint, die Besucher/innen ausfüllen und danach abschicken sollen. Die Aufgabe des Scripts besteht darin, zu verhindern, dass Formulare abgeschickt werden, deren Eingaben offensichtlich falsch oder unvollständig sind. Natürlich hat man dadurch keine Gewähr für die Richtigkeit der Angaben, aber man vermindert doch die Zahl möglicher Falschangaben beträchtlich, wenn man davon ausgeht, dass die meisten Benutzer/innen diese nicht absichtlich machen.

= Laden sie die Datei jsws8.htm in den Browser und probieren Sie erst einmal das ihre Funktionsweise aus.

<HTML>
<HEAD>
<TITTLE> Ein HTML-Formular</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function pruef_formular(formularinhalt)
{
if (!test_name(formularinhalt)) return(false);
if (!test_email(formularinhalt)) return(false);
alert ("Alle Eingaben erfolgreich!");
return(true);
}

function test_name(Formular)
{
if (Formular.name.value == "" || Formular.name.value.indexOf(' ',0) ==-1)
{
alert("Bitte tragen Sie Ihren Namen richtig ein!");
spring_zu("anker_name");
Formular.name.select();
Formular.name.focus();
return (false);
}
else
return (true);
}

function spring_zu(sprungmarke)
{
location.href = location.href.substring(0,location.href.length - location.hash.length)+"#"+sprungmarke;
}

function test_email(Formular)
{
if (Formular.email.value.indexOf ('@',0) == -1 || Formular.email.value.indexOf ('.',0) == -1)
{
alert("\nEs fehlt das Zeichen @ oder ein Punkt \nBitte korrigieren Sie Ihre Eingaben.")
spring_zu("anker_email");
Formular.email.select();
Formular.email.focus();
return (false);
}
return(true);
}
//-->
</SCRIPT>
</HEAD>

<BODY BGCOLOR="#A0A0A0">
<H2>To check or not to check, that is the question.</H2>
<HR SIZE=5 >
<FORM NAME="anmeldeformular" ACTION="mailto:sanmod@du.nw.schule.de"
METHOD="post" enctype="text/plain" onSubmit="return pruef_formular(anmeldeformular)">
<A NAME="anker_name">
<B>Geben Sie bitte Ihren vollständigen Namen ein?</B><P>
<INPUT TYPE="text" NAME="name" size=30 maxlength=30><P>
<A NAME="anker_email">
<B>Ihre E-mail Adresse:</B><P>
<INPUT TYPE="text" NAME="email" size="30" maxlength="30" VALUE=""><P>
<INPUT TYPE="reset" NAME="reset" VALUE="Formular l&ouml;schen !">
<INPUT TYPE="submit" NAME="submit" VALUE="Formular abschicken !">
</FORM>
</BODY>
</HTML>

Für die Erstellung des Formulars wird nur HTML benötigt. Sehen Sie sich daher zuerst den BODY der Datei an.

Im <FORM>-Tag ist bei ACTION eine E-Mail-Adresse eingetragen, an die das Formular verschickt werden soll. METHOD muss bei dieser Übertragungsart auf "post" gesetzt werden. In enctype steht das Format, in dem die Datei als E-Mail versendet wird.

Die Elementobjekte des Formobjektes sind hier zwei Textkomponenten, die der Eingabe durch Benutzer/innen dienen und zwei Buttons.

Das Button "Formular abschicken" dient gleichzeitig der Überprüfung, ob die Eingaben überhaupt "richtig" sein können. (Man könnte auch auf diese Überprüfung verzichten, dann brauchte man kein JavaScript, müsste aber das Formular ungeprüft akzeptieren.) Die Funktion des anderen Buttons erkennen Sie an dessen Beschriftung, die durch die Eintragungen bei VALUE ="Formular l&ouml;schen" erzeugt wird. Beim Klicken dieses Buttons werden alle Eingaben gelöscht.

Wird das Button "Formular abschicken" geklickt {onSubmit="return pruef_formular(anmeldeformular)}, wird die Funktion pruef_formular() aufgerufen.

Diese ruft die Funktion test_name() {test_name(anmeldeformular)} auf, welche nachprüft ob überhaupt etwas eingegeben wurde und ob mindestens ein Leerzeichen (zwischen Vor- und Nachnamen) in der Eingabe vorkommt. Ist eine von diesen beiden Bedingungen nicht erfüllt {if (anmeldeformular.name.value == ""||anmeldeformular.name.value.indexOf() == -1)}, wird die Methode alert() aufgerufen, die wie weiter oben besprochen ein Meldungsfenster erzeugt.

Das Zeichen == ist der Vergleichsoperator. Suchtext == "" heißt, dass Suchtext die Länge Null hat. Das Zeichen || bedeutet "oder" und Suchtext.indexOf('a',0) ist –1, wenn 'a' in Suchtext nicht vorkommt.

Das Textfeld wird wieder angesprungen {spring_zu("anker_name")}

Mit location.href wird der URL des Dokuments angesprochen und mit location.hash ein Anker-Tag, das mit einem Doppelkreuz markiert (z.B. <A href="#Springdahin"></A>) ist. Gibt es ein solches Tag nicht hat location.hash die Länge Null. Durch die Anweisung location.href= ............ + '#' +Sprungmarke wird also durch die Funktion spring_zu() ein solches Anker-Tag erzeugt und anschließend angesprungen.

Die  Eingabe wird markiert {anmeldeformular.name.select()} und der Eingabefocus {anmeldeformular.name.focus()} dorthin gesetzt. Die Funktion test_name() gibt in jedem Fall einen der Werte false oder true an die Funktion pruef_formular() zurück. Letztere wendet auf die Rückgabe von test_name() den Verneinungsoperator (!) an {if (!test_name(anmeldeformular))} und die Überprüfung wird abgebrochen, wenn test_name() den Wert false geliefert hat.

Analog erfolgt die Prüfung der E-Mail-Adresse. Hier wird festgestellt, ob in der Eingabe ein Punkt und das Zeichen @ vorkommen. Fehlt eines von beiden, wird wieder alert() aufgerufen.

Erst wenn alle Eingaben (gemessen an den Prüfkriterien) akzeptabel sind, wird das Formular abgeschickt.

[zum Seitenanfang] [zum Inhaltsverzeichnis]