 |
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 ihreNamen oder die Array-Zählung angesprochen. Dabeigelten die JavaScript-Konventionen. Heiße das zweiteFormular auf der Seite etwa "meldung", das ersteFormularelement, eine Textbox "emailadr", dannwäre der Inhalt dieser Textbox entweder mit: window.document.meldung.emaildr.valueoder window.document.forms[1].elements[0].valueanzusprechen. Auch der Mix beider Bezeichnungsweisen funktioniert.
- Es muß immer einen Anlaß für die Prüfunggeben. Das wird meistens eines der auswertbaren Eventssein. Solche Ereignisse, wie onClick, MouseOver oder onBlurkönnen eine Prüfung veranlassen. Das mußin der öffnenden Klammer des <input>-Tags inder Form onClick="meine_pruef_funktion()" geschehen.Eine solche muß natürlich auf der Seite bekanntsein und wird in der Regel im Head-Teil des Dokumentsdefiniert.
- Wenn die Prüfung mit dem Submit-Button erfolgensoll, wird zunächst unabhängig vom Prüfergebnisder Formularinhalt verschickt. Meldet man allerdings demEventhandler ein "false", dann unterbleibt das Versenden.Deshalb soll die Prüffunktion abhängig vom Ergebnisder Prüfung ein true oder falsezurückmelden. Solche Rückmeldung geschieht mitden Befehlen: return true; oder return false;.
Eintrag im Head:
<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> |
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[n].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> |
Ü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).... |
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> |
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.*\.\w\w*/)!=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>
|
|
|
|
DIENSTE
