Formulare

Zu den wichtigsten Anwendungsmöglichkeiten von Javascript gehört die Prüfung von Formulareinträgen. Einige sollen erzwungen werden, manche sollten auf Sinnhaftigkeit überprüft werden, bevor eine Reaktion, wie z.B. das Abschicken des Formulars, ausgelöst werden soll.

Vorab einige Informationen:

  • Formulare oder Formularelement werden über ihre Namen oder die Array-Zählung angesprochen. Dabei gelten die JavaScript-Konventionen. Heiße das zweite Formular auf der Seite etwa „meldung„, das erste Formularelement, eine Textbox „emailadr„, dann wäre der Inhalt dieser Textbox entweder mit: window.document.meldung.emaildr.value oder window.document.forms[1].elements[0].value anzusprechen. Auch der Mix beider Bezeichnungsweisen funktioniert.
  • Es muß immer einen Anlaß für die Prüfung geben. Das wird meistens eines der auswertbaren Events sein. Solche Ereignisse, wie onClick, MouseOver oder onBlur können eine Prüfung veranlassen. Das muß in der öffnenden Klammer des <input>-Tags in der Form onClick="meine_pruef_funktion()“ geschehen. Eine solche muß natürlich auf der Seite bekannt sein und wird in der Regel im Head-Teil des Dokuments definiert.
  • Wenn die Prüfung mit dem Submit-Button erfolgen soll, wird zunächst unabhängig vom Prüfergebnis der Formularinhalt verschickt. Meldet man allerdings dem Eventhandler ein „false“, dann unterbleibt das Versenden. Deshalb soll die Prüffunktion abhängig vom Ergebnis der Prüfung ein true oder false zurückmelden. Solche Rückmeldung geschieht mit den Befehlen: return true; oder return false;.
<script language=JavaScript> 
   function pruefe() 
   {      
      if(window.document.fragebogen.nachname.value=="") 
      { 
         alert("Den Namen bitte eintragen!"); 
         return false; 
      } 
   } 
</script>

Code des Formulars:

<form name="fragebogen" action="mailto:adress@provi.de" method=post> 
   <input type="text" name="nachname">
   <input type="submit" onClick="return pruefe()"> 
</form>

Wozu prüfen?

Warum soll ein Formular geprüft werden? Gegen willentliche Falscheingabe kann man sich nicht schützen. Man kann aber den Nutzer davor bewahren, versehentlich seinen Eintrag in ein falsches Feld zu setzen. Wenn man die möglichen Kontrollen auf diesen Fall hin konzipiert, werden sie nicht allzu aufwendig. Auch in diesem Fall muß man die Vielfalt möglicher Reaktionen des Nutzers in Rechnung stellen. Wenn man nach dem Einkommen des Nutzers fragt, sollte das Textfeld Zahleingaben zulassen, kann ja sein, es gibt so dumme Nutzer. Es sollte aber auch Texte zulassen, damit der Nutzer z.B. antworten kann: „Du tickst wohl nicht richtig?“

Textfeld leer?

Eintrag im Head:

<script language=JavaScript> 
   function ob_text(eintrag) 
   { 
      if(eintrag == "") 
      { 
         alert("Mausefalle!\nErst einen Namen eintragen!"); 
         document.frag.nach.focus(); 
         return false;
      } 
   } 
</script>

Code des Formulars:

<form name="frag">
    Bitte den Namen eintragen! 
   <input type="text" name="nach" onBlur="ob_text(this.value)"> 
   <input type="button" value="Fertig">
</form>
Bitte den Namen eintragen!

Achtung: Wenn Sie diese Prüfroutine testen, ohne zuvor das Textfeld angeklickt zu haben, geschieht nichts. Wenn das Textfeld den „Focus“ nicht erhält, kann es ihn auch nicht verlieren. In einem echten Formular muß der Focus zu Beginn auf das so zu prüfende Textfeld gesetzt werden, damit beim Verlassen die Prüfung erfolgt. Wenn nach Texteintrag beim Drücken der Taste nichts geschieht, haben Sie das Textfeld erfolgreich verlassen.

Nun zur eigentlichen Mausefalle. Wenn der Focus zurückgesetzt wird, wird offenbar auch das onBlur-Ereignis ausgelöst! Dieser Effekt tritt aber komischerweise manchmal auf, manchmal nicht. Ich gehe der Sache weiter nach.

Tip: Wenn das Meldungsfenster immer wieder erscheint, eine Buchstabentaste drücken und festhalten, dann mehrfach das Fenster wegklicken.

Mehrere leere Textfelder?

Sie haben ein tolles Formular gestaltet, das wenn, dann ganz ausgefüllt werden soll. Den Focus ins Formular zu setzen und eine Mausefalle wie oben zu produzieren, wäre Nötigung. Besser ist es, das „ob“ des Ausfüllens dem Nutzer zu überlassen, ihm aber nicht zu gestatten, ein halbleeres Formular zu versenden. Jetzt kommt die interne Elemente-Zählung ins Spiel:

Eintrag im Head, unhöfliche Form:

<script language=JavaScript> 
   function vollstaendig() 
   { 
      voll=true; 
      for(n=0;n<25;n++) 
      {
          if(window.document.datenblatt.elements&#91;n&#93;.value== "") 
          voll=false;
      }
      if(!voll)alert("Bitte alle Felder ausfüllen!"); 
      return voll; 
   } 
</script>

Code des Formulars:

<form name="datenblatt" action="mailto:adress@provi.de" method=post> 
   <input type=text name="ersterEintrag">
   ...
   <input type=text name="fuenfundzwanzigsterEintrag">
   <input type=submit onClick="return vollstaendig()"> 
</form>


Ist der Text ein Text?

Ob eine Texteingabe sinnvoll ist, kann nur umständlich ermittelt werden. Wenn in einem Namen allerdings Zahlen oder Steuerzeichen auftauchen, dann darf man eine Fehleingabe vermuten. Weil solche Test bei mehreren Textfeldern sinnvoll sein können, erfolgt der Aufruf mit der Nummer des Tabellenelements. Man könnte stattdessen (nach Änderung im Script-Text natürlich!) auch den jeweiligen Elementnamen übergeben.

Geprüft wird so:

<script language=JavaScript> 
function ists_text(num) 
   { 
      ist_text=true;
      pruef_text=window.document.test.elements[num].value.toUpperCase();
      if(pruef_text.length==0)
         ist_text=false;
      else
         for(n=0;n<pruef_text.length;n++)
             {if(pruef_text.charAt(n)<"A"||pruef_text.charAt(n)>"Z")ist_text=false;}
      if(ist_text) 
         alert("Wunderbar, mein(e) liebe(r) "+ window.document.test.elements[num].value+"!");
      else 
         {
             alert("Kein gültiger Text, bitte noch einmal!" 
             window.document.test.elements[num].focus();
         } 
    } 
</script>

Formular:

<form name="test"> 
   Name eintragen! Versuch es, eine  Zahl loszuwerden!
   <input type=text>
   <input type=button value="Prüfen!" onclick="ists_text(0);"> 
</form>
Name eintragen! Versuch es, eine Zahl loszuwerden!

Übrigens, wer hier „Müller-Lüdenscheid“ versucht, hat Pech, denn nicht nur der Bindestrich wird zurückgewiesen! Die obige Prüfung geht nur für Amis etc. ohne Bindestrich. Wollen wir es für Deutsche mit Bindestrich auch mal versuchen? Jetzt wird die Abfrage natürlich komplizierter. Insbesondere Herr Nußbaum macht Ärger, weil es kein großes „ß“ gibt. Deshalb würde ich jetzt Kleinbuchstaben prüfen, außerdem muß die Fragetaktik geändert werden.

diesmal also:

var zeichen="abcdefghijklmnopqrstuvwxyzäöüß-";
pruef_text=window.document.test.elements[num].value.toLowerCase();

und die Prüfabfrage könnte nun etwa lauten:

if(zeichen.indexOf(pruef_text.charAt(n))==-1)....
Jetzt sind deutsche Sonderzeichen möglich!

Ist die Zahl eine Zahl?

Hier soll geprüft werden, ob der Eingabe-String nur Ziffern enthält. Das geht analog zum Test auf Buchstaben. Allerdings ist hier die Parameterübergabe anders geregelt. Eine kleinen Unzulänglichkeit: Führende oder angehängte Leerzeichen werden moniert. Hier ist die Routine etwas sehr pingelig.

<script language=JavaScript> 
   function ists_zahl(wort) 
   { 
      ist_zahl=true;
      if(wort.length==0)
         ist_zahl=false;
      else 
         for(n=0;n<wort.length;n++)
            {if(wort.charAt(n)<"0"||wort.charAt(n)>"9")ist_zahl=false;}
      if(ist_zahl)
          alert(wort + " ist wirklich eine Zahl!");
      else
      {
          alert("Keine gültige Zahl eingetragen");
          window.document.test3.zahlein.focus();
      } 
   } 
</script>

Im Formular steht:

<form name="test3"> 
   Bitte eine ganze Zahl eintragen! Versuch es, die Box auszutricksen!
   <input type=text name="zahlein">
   <input type=button value="Prüfen!" onclick="ists_zahl(zahlein.value);"> 
</form>
Bitte eine ganze Zahl eintragen! Versuch es, die Box auszutricksen!

Ist’s eine E-Mail-Adresse?

Was verlangt man von einer E-Mail-Adresse? Das „@“ ist obligatorisch. Ein Punkt muß die Länderkennung einleiten, die zwei, im Fall der amerikanischen Kennungen drei Buchstaben lang sein darf. Alles das kann man Stück für erfragen. Wenn man die obigen Abfragen begriffen hat, kann man es ohne ein Beispiel. Eleganter und in einem Rutsch geht es aber mit Regulären Ausdrücken.

Die Funktion lautet:

function ists_email(wort)
{
   var text=(wort.match(/w*@w.*.ww*/)!=null)?"Paßt scho!":"Keine zulässige E-Mail-Adresse!";
   alert(text);
}

und nun das Formular:

<form name="test4">
   Bitte eine E-Mail-Adresse eintragen! Versuch es, die Box auszutricksen!
   <input type=text size=30 name="mailein">
   <input type=button value="Prüfen!" onclick="ists_email(mailein.value);">
</form>
Bitte eine E-Mail-Adresse eintragen! Versuch es, die Box auszutricksen!

Dieses Tutorial wurde bereitgestellt von Prof. Dr. Rolf Hirte, Technische Fachhochschule Wildau. Vielen Dank an dieser Stelle!
Viel Spass beim Lernen und beim Erstellen eigener JavaScripts.