Hallo, ich habe ein kleines Tutorial zu HTML und Javascript. In diesem Tutorial geht es um Feldüberprüfungen. Jeder kennt das, man möchte dem Besucher etwas besonderes bieten, und die Gelegenheit bietet bis jetzt nur in PHP an.
Da PHP nur dann überprüft wenn der Button geklickt wurde bzw. Das Forumlar abgesendet wurde, macht es kein Besonderen Eindruck, da eventuell alle Eingaben verschwunden sind, oder es durch hässliche Breaks gestört wird.
Bekanntlicherweise bietet Javascript eine sehr schöne Funktion bzw. auch Funktionen zur Feldüberprüfung an. Da aber nicht jeder weiß, wie das anhand mit Javascript gemacht wird, habe ich eine Reihe von vielen verschiendenen Prüfungen.
Diese wurden von Adobe erstellt und es handelt sich um Javascript Produktklassen. Diese sind Lizenzfrei und können sehr viel mehr, als ihr je dachtet :-s
Nun langes gerede, kurzer Sinn. Bevor ich loslege, könnt ihr euch meine Demo anschauen:
hier klicken
Nun fangen wir mal an. Als erstes braucht ihr die Klassen und Stylecheets.
Diese könnt ihr hier Downloaden
Textfelder Überprüfungen
Nun erstellen wir eine neue HTML Seite. Wichtig hierbei sind, das der Header mitgeliefrt wird. Das heisst:
Code:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
<title>Validation TextField</title>
</head>
<body>
</body>
</html>
solltet ihr so erstellen.
Dann müssen wir als nächstes erstmal die Stylecheets und die produktklassen mittels Javascript includen. Diese müssen zwischen den beiden
"head Tags" sein.
Code:
<script src='___js/inc_validationtextfield.js' type='text/javascript'></script>
<link href='./___js/inc_validationtextfield.css' rel='stylesheet' type='text/css'>
Die Textfelder bieten folgende Überprüfungsmethoden:
Code:
# Normal: none
# Ganzezahl: integer
# E-Mail: email
# Datum: date (, format:'dd.mm.yyyy')
# Uhrzeit: time (, format:'h/i')
# Kreditkarte: credit_card (, format:'visa')
(, format:'mastercard')
# PLZ: zip_code
# Tel: phone_number
# Sozialversicherungsnummer: social_security_number
# Währung: currency (, format:'dot_comma')
(, format:'comma_dot')
# Reale Zahl: real
# IP Adresse: ip (, format:'ipv4') # IPv4
(, format:'ipv6') # IPv6
(, format:'ipv6_ipv4') # IPv4 und IPv6
# URL: url
Nun weiter. Jetzt haben wir den Head und Bodybereich mit den wichtigsten Funktionen gefüllt. Nun erstellt ihr wie gewohnt ein Textfeld oder mehere.
Code:
<input name='Feld' type='text' id='Feld' />
Jetzt kommt die erste Überprüfung zustande:
Code:
<span id='TexFeld'>
<input name='Feld' type='text' id='Feld' />
<span class='textfieldRequiredMsg'>Sie müssen schon etwas eingeben...</span>
<span class='textfieldInvalidFormatMsg'>Die Eingaben haben ein Falsches Format...</span>
</span>
Nun müssen wir am Ende der Datei aber noch vor dem Bodybereich die Javascript Variablen einfügen.
Code:
<script type='text/javascript'>
var TexFeld = new Spry.Widget.ValidationTextField('TexFeld', 'url',{validateOn:['blur', 'change']});
</script>
Nun eine Kurze Erklärung: var TextFeld ist ein Frei difinierbarer Name. Das bedeutet das alles stehen kann. Egal was, es soll nur einen anderen Namen bekommen, fals ihr mehere Felder habt zum überprüfen.
in:
Code:
new Spry.Widget.ValidationTextField('TexFeld', 'url',{validateOn:['blur', 'change']});
müßt ihr den Name "TextFeld" eintragen. Das ist der Name den ihr Oben im <span> Tag benannt habt. Dabei ist es egal wie die Felder heissen. Wichtig ist, das jedes Textfeld seinen eigenen Namen bekommt wie zb. TextFeld. Nach den Namen, tragt ihr wo "url" steht, euere Überprüfungsmethode ein. zb. "url" oder "integer" (Zahlen)
Das war es schon. Die weiteren Methoden stehen ja oben. Diese müsst ihr einfach nur eintragen und die Werte dementsprechend verändern.
Weitere Tutorials zu Textarea gibt es beim nächsten mal.
Gruß euer Michael.
Facebook
Twitter
Registrieren
Login
(X)HTML, JavaScript, Ajax
Forum
Mitglieder
Newsletter
Fotos
Geburtstage
