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 ...
OnBlur="IstZuLang(this,AnzahlZeichen)"
OnBlur="NurZiffern(this)"
OnBlur="NurTelefon(this)"
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 |
<FORM ... OnSubmit="...">
),
das noch einmal eine Funktion zur Prüfung der Felder aufruft (weitere Erklärungen siehe SelfHTML von Stefan Münz)
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.-_@
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>