Eingabe prüfen – Javascript Tutorial

30
Mrz

eingabe-prufen

Man kennt es, man will sich auf einer Website oder in einem Forum anmelden, füllt alles aus und dann voilà nach dem absenden erhält man die Meldung, dass irgendetwas falsch eingegeben wurde und muss alles nochmal eingeben.

Um dies zu verhindern könnte man irgendetwas mit PHP bastlen, man kann jedoch die Eingabe auch unmittelbar nach dem Eingeben prüfen mit Javascript. Genau dies schauen wir uns in diesem Tutorial an.

Voraussetzungen:

  • Basis HTML Kenntnisse (Formulare)
  • Basis CSS Kenntnisse

Lernziele:

  • Abfragen von Werten via Javascript
  • Anzeigen/Verstecken von Div Containern
  • Javascript Funktionen aufrufen

Und so soll unser Ergebnis schlussendlich aussehen:

Hier klicken für eine Vorschau

Eigentlich ist das Ganze relativ simpel, wir haben zwei Div Container – einen für richtig und einen für falsch – und ein Textfeld. Jedesmal wenn man das Textfeld verlässt, also es den Fokus verliert, wird geprüft ob die Eingabe richtig ist.

  1. Erstellt ein neues HTML Dokument.
  2. Fügt folgenden Code in den <head> Bereich ein:




Mit function testIt(text) wird eine neue Funktion definiert. Ihr wird dabei der Parameter “text” übergeben. Später können wir die Funktion dann mit “testIt(“unser text”) aufrufen und es wird geprüft ob “unser text” der gewünschten Eingabe entspricht.

Dann folgt eine einfache IF-Abfrage: if(text == “bert”) Daran sollte eigentlich alles klar sein, wenn unser text Parameter “bert” entspricht wird die Anweisung ausgeführt.

Nun kommt der eigentlich interessante Teil:

document.getElementById(“right”).style.display = “block”;
document.getElementById(“wrong”).style.display = “none”;

Mit diesen beiden Anweisungen  verstecken wir einmal unseren DIV-Container “wrong” und zeigen dafür den Container “right” an. Wichtig ist dabei, dass die DIV-Container auch wirklich so heissen, denn sonst funktioniert das Script nicht!

Nun folgt unser CSS Code. Dazu muss ich eigentlich nichts weiter sagen, ausser dass mit “display: none;” beide Container zuerst versteckt werden.

Kopiert den Code auch einfach in den <head> Bereich.

body {
font-family: "Century Gothic";
background-color: #6A6A6A;
}
#right {
background-color: #99CC33;
width: 250px;
border: 1px solid #009933;
color: #006633;
display: none;
padding: 5px;}
#wrong {
background-color: #FF3333;
width: 250px;
border: 1px solid red;
color:#990000;
display: none;
padding: 5px;

}

So nun kommen wir zum eigentlichen HTML Teil. Eigentlich ist auch alles wieder ganz simpel, ein <form> Element und ein Textfeld. Kopiert den folgenden Code in den <body> Bereich des Dokuments:


Gib hier unten "bert" ein:

Name:

Die Eingabe ist Falsch!

Wichtig ist hier folgender Teil: “onblur=”testIt(this.value)”“, denn damit rufen wir unsere Funktion auf. “onblur” ist ein vordefinierter Javascript Event und wird immer dann aufgerufen, wenn das Textfeld den Fokus verliert. Mit “testIt(this.value)” wird dann die Javascript Funktion von Oben aufgerufen. Als Parameter wird dabei “this.value” übergeben was soviel heisst wie der Inhalt des Textfelds.

Und das wäre auch eigentlich schon alles. Spielt ein bisschen mit dem Code rum und versucht wie immer zu verstehen wie das ganze funktioniert!

Fragen, Kritik etc. bitte in die Comments!

MFG

Michael Ziörjen

VN:F [1.0.8_357]
Rating: 4.3/5 (3 votes cast)

There are 3 comments in this article:

  1. 7/04/2011CalKappytam says:

    When scooby-doo movie to the vineyards; let us lodge in the most recent Scooby-Doo movie streaming of learning to walk, learning to play poker you should

  2. 2/06/2011Jaivaamiree says:

    Alcohol And Other Drugs Information http://www.pramsforbaby.com/ – generic lexapro online Lexapro is generally prescribed starting at 10mg a day. purchase lexapro

  3. 3/10/2011Peter Papnase says:

    Warum nimmst Du nicht gleich schwarze Schrift auf scharzem Grund?

Write a comment: