Diese Seite benötigt die Unterstützung von JavaScript 1.1
Bitte aktivieren Sie JavaScript in Ihrem Browser und klicken Sie auf ‘Aktualisieren’

Formularfunktionen

Beschreibung

Viele Formulare nerven den Anwender damit, daß sie erst alle Eingaben entgegennehmen und dann beim Abschicken an einem Fehler hängenbleiben. Besser wäre es, wenn Formulare Fehler möglichst schnell melden

Die folgenden JavaScripts verwenden das OnBlur-Ereignis, um ein Formularfeld vom Typ
<INPUT TYPE="TEXT" VALUE="" NAME="EingabeName">
nach dem Verlassen zu überprüfen.

Syntax

Zwischen < und > eines <INPUT TYPE="text" VALUE= ...>-feldes wird folgender Code eingefügt: Um zu prüfen, ob ...

... zu viele Zeichen eingegeben wurden: OnBlur="IstZuLang(this,AnzahlZeichen)"
... ein Feld nur Ziffern enthält: OnBlur="NurZiffern(this)"
... ob das Feld eine (einigermaßen) korrekte Telefon/Fax-Nummer enthält: OnBlur="NurTelefon(this)"
... ob das Feld eine (einigermaßen) korrekte eMail-Adresse enthält: OnBlur="eMailAdresseOK(this)"

Das Schlüsselwort 'this' ist der Verweis auf das aktuelle Steuerelement. Dank 'this' muß hier nicht mehr der Name des Steuerelemets wiederholt werden.

Für das JavaScript-Programm IstZuLang sind folgende Argumente erforderlich:

`this`	Schlüsselwort in JavaScript. 'this' ersetzt den Namen des aktuellen Steuerelements (Quell-Feld) und beugt so Schreibfehlern vor.
`AnzahlZeichen`	Gibt an, wieviele Zeichen maximal im Quell-Feld erlaubt sind.

Das Unterprogramm PruefeZeichen ermittelt, ob die eingegeben Zeichen zulässig sind und gibt eine Fehlermeldung aus.

`Feld`	Das Input-Feld des Formulars, dessen Inhalt untersucht werden soll
`ZugelasseneZeichen`	String mit Zugelassenen Zeichen. \\ ergibt den Backslash \/ den Slash und \" ergibt Anführungszeichen
`Fehlermeldung`	Text, mit dem eine eventuelle Fehlermeldung beginnen soll

Anmerkungen

Das JavaScript wird erst nach Verlassen des jeweiligen INPUT-Feldes aktiv. Auf fehlerhafte Eingaben wird zwar hingewiesen und die Anweisung Feld.focus() soll verhindern, das bei Falscheingaben das Feld verlassen wird, aber bei einigen Browsern funktioniert das nicht, so dass das Formular auch mit Fehlern abgeschicht werden kann.
Wenn Querbeziehungen zwischen verschiedenen Feldern geprüft werden sollen (Beispiel: Ist 'Geschlecht: männlich' aktiviert, kann die Frage 'Sind Sie Schwanger' nicht mit JA beantwortet werden) Braucht das Formular noch ein OnSubmit-Ereignis (<FORM ... OnSubmit="...">), das noch einmal eine Funktion zur Prüfung der Felder aufruft (weitere Erklärungen siehe SelfHTML von Stefan Münz)
Beim OnBlur-Ereignis können mehrere Javascript-Anweisungen aneinander gehängt werden, wenn sie durch ein Semikolon (;) getrennt wurden.
Allgemein wird von Problemen mit dem Netscape-Navigator berichtet, wenn in JavaScript-Anweisungen unnötige Leerzeichen vorhanden sind
Es gibt verschiedene Kriterien, nach denen eine eMail-Adresse überprüft werden kann. Dieses Programm nutzt nicht alle Möglichkeiten, damit es einfach bleibt.
Nach Denic-Vergaberichtlinien muß z.B. eine de-Domain aus mindestens 3 Buchstaben bestehen, dieses einfache Programm würde aufgrund seines Aufbaus dann aber eMail-Adressen wie z.B. meyer@x.strahlen.de zurückweisen.
Bei Anwendung dieses Skripts ist folgender Aufbau verbindlich: min. 1 Zeichen vor dem @, ein Punkt nach dem @ und min. 1 Zeichen zwischen @ und Punkt sowie min. 1 Zeichen nach dem Punkt. Außerdem dürfen nur folgende Zeichen verwendet werden:
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.-_@
Zeilenumbrüche in JavaScript-Meldungen erzeugt man wie in der Programmiersprache C: Ein \n mitten im Text wechselt in die nächste Zeile.

Funktions-Demo

Das folgende Formular demonstriert die Wirkung der Funktion.
Die Wirkung zeigt sich erst, wenn das jeweilige Feld verlassen wurde !!!

Code

  <SCRIPT LANGUAGE="JavaScript1.1" TYPE="text/javascript"><!--

  //--- Prüft, ob der Text für ein Feld zu lang ist.
  function IstZuLang(Feld, AnzZeichen)
  {  // Erstellt von Ralf Pfeifer (www.arstechnica.de)
     var FehlerMeldung = "Fehler beim Ausfüllen des Formulars\n\n"
     var FeldLaenge = Feld.value.length
     var OK = FeldLaenge <= AnzZeichen

     if (!OK) {
        FehlerMeldung += "Dieses Feld darf max. " + AnzZeichen
        FehlerMeldung += " enthalten.\nSie haben " + FeldLaenge + " Zeichen eingegeben"
        alert(FehlerMeldung)
        Feld.focus() }
     return OK
  }



  //--- Prüft, ob nur Ziffern eingegeben wurden
  function NurZiffern(Feld)
  {  PruefeZeichen(Feld, "0123456789", "Bitte prüfen Sie die Zahl") }



  //--- Prüft, ob nur Zeichen eingegeben wurden,
  //--- die für eine Telefonnummer üblich sind
  function NurTelefon(Feld)
  {  PruefeZeichen(Feld, "0123456789 /-+()", "Bitte prüfen Sie die Telefonnummer") }



  //--- Prüft, ob eine eMail-Adresse korrekt aufgebaut ist
  function eMailAdresseOK(eMail)
  {  // Erstellt von Ralf Pfeifer (www.arstechnica.de)

     // Falls das Feld leer ist, ohne Prüfung aussteigen
     if (eMail.value.length==0) { return true }


     // Text für die Fehlermeldung
     var FehlerMeldung = new String("Fehler in der eMail-Adresse\n\n")

     // Position des @ herausfinden
     var PosEt = eMail.value.indexOf("@")
     if (PosEt == -1) {
       alert(FehlerMeldung + "Es fehlt ein @")
       return eMail.focus() }
     if (PosEt == 0) {
       alert(FehlerMeldung + "Es fehlt der Empfänger")
       return eMail.focus() }
     if (eMail.value.indexOf("@", PosEt + 1) > PosEt) {
       alert(FehlerMeldung + "Es darf nur ein @ enthalten sein")
       return eMail.focus() }

     // Position des ersten . nach dem @ herausfinden
     var PosPt = eMail.value.indexOf(".", PosEt)

     if ((PosPt == -1) || (PosPt - PosEt < 2) || (eMail.value.length - PosPt < 3)) {
       FehlerMeldung += "Eine eMail-Adresse muß so aufgebaut sein: x@x.xx "
       FehlerMeldung += "Jedes x steht für mindestens ein Zeichen"
       alert(FehlerMeldung)
       return eMail.focus() }

     // Zulässige Zeichen für eMails definieren
     var ZugelasseneZeichen = new String("abcdefghijklmnopqrstuvwxyz")
     ZugelasseneZeichen += ZugelasseneZeichen.toUpperCase() + "0123456789.-_@"

     // eMail-Adresse auf zulässige Zeichen überprüfen
     return PruefeZeichen(eMail, ZugelasseneZeichen, FehlerMeldung)
    }



    //--- Unterprogramm, welches die Zeichen prüft
    function PruefeZeichen(Feld, ZugelasseneZeichen, FehlerMeldung)
    {  // Erstellt von Ralf Pfeifer (www.arstechnica.de)
       for (var Pos = 0; Pos < Feld.value.length; Pos++)
       {
          if (ZugelasseneZeichen.indexOf(Feld.value.charAt(Pos)) == -1)
          { FehlerMeldung += "\n\nIhre Eingabe enthält das Zeichen '"
            FehlerMeldung += Feld.value.charAt(Pos)
            FehlerMeldung += "'. Sie dürfen nur diese Zeichen verwenden:\n"
            FehlerMeldung += ZugelasseneZeichen
            if (ZugelasseneZeichen.indexOf(" ") == -1)
               { FehlerMeldung += "\nLeerzeichen sind nicht erlaubt" }
            else
               { FehlerMeldung += "\nund das Leerzeichen" }
            alert(FehlerMeldung)
            Feld.focus()
            return
          }
       }
    }

  // -->
  </SCRIPT>

Geben Sie max. 5 Zeichen ein
Es sind nur Ziffern erlaubt
Geben Sie eine Telefonnummer ein
Geben Sie eine eMail-Adresse ein