Beispiel: Formulare in JavaScript

Ein wichtiges Einsatzgebiet von JavaScript ist die Überprüfung und Validierung von Formularen. Allerdings biete JavaScript auch hier deutlich mehr Möglichkeiten - wir zeigen Sie Ihnen.

Formulare überprüfen

Gerade wenn wichtige Benutzerdaten oder Kundeninformationen gesammelt werden müssen, ist eine Eingabeprüfung fast unumgänglich. JavaScript stellt zum Zugriff auf das Formular das froms-Array zur Verfügung - es kann aber auch direkt über den Namen auf das Formular zugegriffen werden. Formulare enthalten in der Regel verschiedene Typen von Eingabefeldern bzw. Eingabefelder mit einem anderen Kontext. Diese könnten z.B. Pflichtfelder für Namen oder Adresse, Email, Radiobuttons oder Select-Felder sein. Als HTML-Grundlage für die kommenden Beispiele wird folgendes Formular vorausgesetzt. Es kann über document.form1 oder document.forms['form1'] angesprochen werden. Die einzelnen Felder können dann mit dem Namen oder über das elements-Array angesprochen werden: document.form1.Namensfeld oder document.form1.elements['Namensfeld']. Die HTML-Grundlage:

<form name="form1" onsubmit="return pruefen()">
Name:      <input name="Namensfeld" type="text"><br>
Anschrift: <input name="Anschriftsfeld" type="text"><br>
E-Mail:    <input name="EMailfeld" type="text"><br>
Betreff:   <select name="Betreff">
             <option value="nichts">Bitte wählen</option>
             <option value="Anfrage">Anfrage</option>
             <option value="Bestellung">Bestellung</option>
             <option value="Hinweis">Hinweis</option>
            </select><br>
Newsletter abonieren:
            <input type="Radio" name="News" value="ja"> ja /
            nein <input type="Radio" name="News" value="nein">
            <br>
Text:      <textarea name="Eingabe" cols="30" rows="3">
            </textarea><br>
<input type="Submit"><input type="reset">
</form>

Außerdem besitzt das Formular ein onsubmit-Ereignis, das auf die Funktion pruefen zeigt, die wir im head-Bereich definieren werden.

Pflichtfelder

Besonders bei Kontaktanfragen ist meist die Eingabe eines Namens unumgänglich. Um zu prüfen, ob auch wirklich alle Felder ausgefüllt sind, schauen wir, ob sie einen Inhalt (value-Eigenschaft) besitzen:

Die Funktion prüft, ob die einzelnen Felder Text enthalten. Ist das nicht der Fall, wird die Variable res auf false gesetzt. Wurde ein Fehler gefunden (ist also res gleich false), wird ein Hinweisfenster aufgerufen und das Absenden des Formulars durch Rückgabe des Wertes false verhindert.

Email-Felder

Bei Feldern, in die E-Mail-Adressen eingegeben werden sollen, sollte neben dem Inhalt auch geprüft werden, ob es sich dabei wirklich um eine E-Mail-Adresse handelt. Handelt es sich um ein E-Mail-Adresse, so ist mindestens ein Buchstabe, ein @-Zeichen, 3 weitere Buchstaben, und Punkt und nochmals mindestens zwei Buchstaben vorhanden. Da dies eine ziemlich komplexe Fragestellung ist, empfiehlt sich hier
a) lediglich zu prüfen, ob ein @-Zeichen vorhanden ist und der Inhalt mindestens 8 Zeichen lang ist. Oder
b) mit regulären Ausdrücken exakt eine Prüfung vor zu nehmen.
Erstere Lösung könnte wie folgt aussehen:

if(a.EMailfeld.value.indexOf('@') == -1){res = false;}
if(a.EMailfeld.value.length < 8){res = false;}

Die zweite und kompliziertere Lösung könnte z.B. so aussehen:

reg = new RegExp('^([a-zA-Z0-9-._]+)'+    //Name
                  '(@)'+                       //@-Zeichen
                  '([a-zA-Z0-9-.]+)'+        //Domain
                  '(.)'+                       //Punkt
                  '([a-zA-Z]{2,4})$');           //TLD
if(reg.test(a.EMailfeld.value) == false){res = false;}

Radiobuttons

Sind Radiobuttons nicht von vornherein markiert, müssen wir testen, ob nun eines eine Markierung enthält. Da Radiobuttons alle den gleichen Namen tragen, ergibt sich bei JavaScript für diese Buttons ein Array. Soll auf einen Button der gleichen Buttons zugegriffen werden, so kann dies über den Index des Buttons geschehen: document.form1.News[1]... . Durchlaufen wir alle Buttons, können wir testen ob einer markiert wurde (und ggf. welcher das ist):

if(a.News[0].checked == false && a.News[1].checked == false)
{res = false;}

Sofern das Formular mehr als zwei Radiobuttons besitzt die zu einer Gruppe gehören, lassen sich diese auch etwas komfortabler mit einer for-Schleife prüfen

var alleFalse = true;
for(i = 0; i < a.News.length; i++)
{
if(a.News[0].checked == true)
{
alleFalse = false;
break;
}
}
// wenn alleFalse == true, dann wurde kein Radiobutton ausgewählt

Select-Felder

In unserem Beispiel haben wir auch ein Select-Feld definiert über das der Betreff der Anfrage ausgewählt werden kann. Damit der Besucher auch auf jeden Fall einen Betreff auswählt (die Standardauswahl ist ja "Bitte wählen") sollte überprüft werden, welcher Eintrag gewählt wurde. Auf das Select-Feld kann wie gewohnt über den Namen zugegriffen werden - die einzelnen Einträge sind über das options-Array abrufbar. Da uns in diesem Beispiel ausreicht zu wissen, dass nicht der erste Eintrag ("Bitte wählen") gewählt wurde, brauchen wir nur zu checken, ob die Eigenschaft selectedIndex des Select-Feldes ungleich 0 (Null) ist. Die Eigenschaft gibt den Index des ausgewählten Eintrags an: Wurde der erste ausgewählt, gibt sie 0 aus, für den zweiten 1, für den dritten 2 usw. Wir vervollständigen das Beispiel mit folgendem Code:

if(a.Betreff.selectedIndex == 0){res = false;}

Das Resultat

Die fertige Funktion pruefen könnte letztlich komplett zusammengesetzt etwas so aussehen:

Select-Feld als Link

Oftmals sieht man auch, dass Select-Felder als Links verwendet werden. Kaum hat man einen Eintrag ausgewählt, schon wird man auf die entsprechende Seite weiter geleitet. Auch dieser Trick wird - wie sollte es anders sein - mit JavaScript realisiert. Als Grundlage für dieses Beispiel nehmen wir folgendes Select-Feld. Es enthält die Einträge Startseite, News, Angebote, Referenzen und Kontakt. Jeder Eintrag wurde zusätzlich mit einem Wert versehen (value-Attribut des option-Elements) der die aufzurufende Seite angibt:

<select>
  <option value="-">zur Seite springen</option>
  <option value="start.htm">Startseite</option>
  <option value="news.htm">News</option>
  <option value="angebot.htm">Angebote</option>
  <option value="referenz.htm">Referenzen</option>
  <option value="kontakt.htm">Kontakt</option>
</select>

Wird nun ein Eintrag ausgewählt, so ändert sich die Anzeige und das Ereignis onchange wird aufgerufen. Wir benötigen also einen Event-Handler, der auf dieses Ereignis reagiert. Der Handler muss dann prüfen, ob nicht der erste Eintrag ausgewählt wurde da es für diesen keinen Link gibt. Wurde ein anderer als der erste ausgewählt, so muss der hinterlegte Wert des Eintrags (value-Attribut) abgefragt und die entsprechende Seite angesteuert werden. Den ausgewählten Eintrag erhalten wir über das options-Array des Select-Feldes und die selectedIndex-Eigenschaft. Der gesamte Code des Event-Handlers könnte z.B. so aussehen:

Grafische Checkboxen und Radiobuttons

Unter Umständen kann es für das Design einer Seite nützlich sein, wenn die Checkboxen und Radiobuttons grafisch angepaßt werden. Mit Hilfe von JavaScript können anstelle der Checkboxen und Radiobuttons auch Grafiken verwendet werden - alles was dazu notwendig ist sind je zwei Grafiken und ein wenig JavaScript . Die Grafiken sollten recht schnell erstellt sein und könnten z.B. so aussehen:

Darstellung: Vorlagen für Radiobuttons (l.) und Checkboxen (r.)

Grafische Checkboxen

Für jede Checkbox brauchen wir jeweils ein Bild und ein verstecktes Input-Feld, damit der Wert der Checkbox auch abgeschickt wird sofern es markiert wurde. Um das Bild kommt noch ein Link (der auch gleich den Text der Checkbox umschließen kann) damit wir das Bild mit JavaScript verknüpfen können:

<input type="hidden" value="false" name="cb1">
<a href="#" onclick="CheckBox('cb1'); return false;">
<img src="checkbox1.jpg" border="0" name="cb1">
Text für Checkbox 1
</a>

Bitte beachten Sie, dass es hier unbedingt wichtig ist, dass das Bild und das versteckte Input-Feld den gleichen Namen (hier cb1) tragen - wir brauchen das um leichter auf die Komponenten zugreifen zu können. Als erstes ist die Checkbox noch unausgewählt - das Input-Feld erhält von uns also den Wert false und als Bild nehmen wir das Bild, das die unmarkierte Checkbox darstellt (hier checkbox1.jpg). Der Link ist mit der Funktion CheckBox verknüpft, die in etwa so aussehen könnte:

Nun wird auch klar, warum Input-Feld und Bild den gleichen Namen tragen sollten. Der Funktion wird der Name der Checkbox übergeben, die geändert werden soll (haben wir im Link definiert). Die Funktion prüft dann, ob der zugehörige Wert des versteckten Input-Feldes true oder false ist und wechselt entsprechend den Wert und gleichzeitig die Grafik der Checkbox. (Das Formular trägt hier den Namen form1.)

Grafische Radiobuttons

Auch grafische Radiobuttons sind derart einfach realisierbar. Da bei Radiobuttons immer mehrere Buttons zu einer Gruppe zusammengesetzt werden muss die Technik jedoch etwas erweitert werden. Wie oben auch, brauchen wir zunächst ein verstecktes Input-Feld für eine einzelne Gruppe von Buttons. Außerdem brauchen wir natürlich für jeden Button ein Bild mit einem Link drum rum - auch wie oben:

<input type="hidden" value="0" name="r1">
<a href="#" onclick="RadioButton('r1',0,3); return false;">
<img src="radio1.jpg" border="0" name="r10">
Text für Radiobutton 1
</a><br>
<a href="#" onclick="RadioButton('r1',1,3); return false;">
<img src="radio1.jpg" border="0" name="r11">
Text für Radiobutton 2
</a><br>
<a href="#" onclick="RadioButton('r1',2,3); return false;">
<img src="radio1.jpg" border="0" name="r12">
Text für Radiobutton 3
</a><br>

Da wir nun mehrere Bilder haben, können diese natürlich nicht den gleichen Namen tragen. Um sie dennoch relativ leicht zugänglich zu machen vergeben wir einen einheitlichen Namen (hier r1) den auch das Input-Feld bekommt und hängen diesem bei jedem Bild eine weitere Zahl an: r10, r11, r12. Die Zahlen entsprechen dem Index des Radiobuttons in der Gruppe, d.h. der erste Button bekommt den Namen r1 plus die 1, der zweite den Namen r1 plus die 2 usw. Außerdem ist jeder Link mit der Funktion RadioButton verknüpft die so aussehen könnte:

Die Funktion erwartet drei Parameter: Den allgemeinen Namen der Gruppe (hier ist es r1) und gleichzeitig den Namen des Input-Feldes, den Index des Buttons auf den geklickt wurde und letztlich die Anzahl der vorhandenen Radiobuttons in der Gruppe (hier sind es 3). Wird auf den ersten Radiobutton geklickt bekommt die Funktion also die Werte r1, 0, 3 übergeben. Die Funktion setzt dann als erstes den Wert des versteckten Input-Feldes auf den Index des markierten Buttons. Anschließend werden alle Bilder der Gruppe durchlaufen und ggf. entsprechend die Grafik ausgetauscht. Es ist dabei unbedingt wichtig, dass alle Bilder vorhanden und durchnumerieret sind, das erste Bild muss dazu den Index 0 haben und das letzte Bild den Index der Anzahl minus 1 (bei drei Bildern ist das also die 2).

Paßworteingabe prüfen

Wenn sich ein Benutzer das erste mal auf einer Seite anmeldet muss er manchmal ein Paßwort angeben mit dem er später auf die Inhalte zugreifen kann. Damit er sich nicht vertippt wird er meist gebeten das Paßwort zweimal einzutippen. Mit JavaScript kann dann geprüft werden, ob der Besucher denn auch zweimal das gleiche eingetippt hat. Ist das nicht der Fall sollte er seine Eingabe natürlich noch mal korrigieren. Dazu braucht es im Prinzip nicht viel: Bei onsubmit wird geprüft, ob die zwei Felder übereinstimmend sind - wenn ja passiert nichts, wenn nein wird eine Meldung angezeigt und der Vorgang abgebrochen. Beispiel:

<form onsubmit="if(this.pw1.value != this.pw2.value)
{alert('Passworteingabe unterscheidet sich!');
return false;}">
Name: <input type="Text" name="name"><br>
Paßwort: <input type="Password" name="pw1"><br>
Paßwort: <input type="Password" name="pw2"> (wiederholen)<br>
<input type="Submit">
</form>

Bitte beachten Sie, dass dieses Skript jedoch keine Passwort abfrage leistet. Diese sollte serverseitig gelöst werden.

Felder verfügbar machen (IE/Moz)

Manchmal sind bestimmte Felder nur in einem gewissen Kontext nutzbar. Bestellt z.B. ein Benutzer etwas aus dem Internet ist es nicht unbedingt notwendig, dass er seine E-Mail-Adresse angibt. Auf der Seite könnte aber gleichzeitig noch eine Checkbox sein mit der er sich für den Newsletter des Herstellers anmelden kann - in diesem Kontext ist eine E-Mail-Adresse natürlich notwendig. Microsofts und die Gecko-Browser bietet dazu die Möglichkeit Formularfelder ein- und auszuschalten. Quasi jedes Feld kann über die disabled-Eigenschaft verfügbar oder eben nicht verfügbar gemacht werden. Beispiel:

<input type="Checkbox" name="news" value="news"
onclick="document.getElementById('newsmail').disabled = (this.form.news.checked == false);">
Für den Newsletter anmelden?<br>
E-Mail: <input type="Text" name="mail" id="newsmail" disabled>

Textfelder begrenzen

Bei Textfeldern (textarea-Element) ist es manchmal wünschenswert, dass der Besucher nur eine bestimmte Menge an Zeichen eingeben kann. Da HTML hier keine Lösung bietet muss man sich mit JavaScript aushelfen. Das Prinzip ist ganz einfach: Wird ein neues Zeichen eingegeben (onkeypress-Ereignis) wird geprüft, wieviele Zeichen schon vorhanden sind. Ist eine bestimmte Zahl erreicht wird das Ereignis abgebrochen. Zusätzlich kann dem Besucher gleich noch angezeigt werden wieviele Zeichen er noch eingeben darf. Beispiel:

<textarea onkeypress="
this.form.zeichen.value = 160-this.value.length;
if(this.value.length >= 160){return false;}">
Bitte Text eingeben!
</textarea>
<input type="text" value="0" name="zeichen">

Das Beispiel hat leider einen kleinen Nachteil: Sind alle Zeichen eingegeben (hier 160) kann man keine Taste mehr drücken - die Löschen-Taste funktioniert dann auch nicht mehr. Einzig mit der Entf-Taste kann man dann noch Text löschen.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Beispiel: Formulare in JavaScript

Über uns

Cookie-Einstellungen