nicht angemeldet
Hallo JavaScript und PHP Cracks
Ich bin am verzweifeln und mir läuft die Zeit davon. Am nächsten Mittwoch (14.Jan.2009) habe ich meine Abschlussprüfung für eine Web-Weiterbildung. Leider ist javascript und PHP nicht gerade mein Ding. Mein Problem: Für die Prüfung muss als Vorbereitung eine fiktive WebSeite erstellt werden (basierend darauf werden zusätzliche Prüfungsaufgaben gestellt),welche auch ein Formular enthält.
Das Formular muss sowohl client-, als auch serverseitig validiert werden per RegExp.
Was wird validiert: Vorname Nachname Strasse PLZ Ort E-Mail Telefon (höchst wahrscheinlich wir an der Prüfung auch noch eine Validierung eines erweiterten Formulars verlangt,d.h. Validierung von checkboxen usw.
Das besondere am Formular: -Französische Zeichen müssen erlaubt sein -PLZ max 5 Zahlen -Telefon: nur Zahlen, Leerschläge, +,/ und ()
-bei falscher Eingabe soll der Feldhintergrund ROT werden und ein informativer Text NEBEN dem Formularfeld ebenfalls in ROTER Farbe erscheinen (dabei sind zwei verschiedene Hinweistexte vorgesehen: 1x für ein leeres Feld und 1x für nicht erlaubte Zeichen) -Bei korrekter Eingabe wird Formularfeld GRÜN -Die Validierung soll sowohl beim verlassen eines Textfeldes, als auch beim Versenden des Formulars erfolgen
folgendes Javascript habe ich aus einer Lektion, welches glaube ich ziemlich gut als Vorlage dienen könnte. Validierung erfolgt aber mit alertboxen, welche ich eben nicht will!
// JavaScript Document
//Author Andreas Grosse
//-------Formularvalidierung mit Anwendung von Regulaeren Ausdrücken-----//
//----Überprüfung beim Verlassen der Formularfelder onblur---//
function formcheck()
{
/*definition zeichensatz utf-8*/
document.charset = "utf-8";
/*definition errormeldung*/
/*errormeldung werden in seperatem array gespeichert*/
var error = new Array();
/*anzahl fehler festhalten, d.h. sie werden nummeriert für die schlaufe array beginnt dabei immer mit 0 gleich 1.feld*/
var anzahlfehler = 0;
/*variable vordefinierter ausgabesatz als einleitung fehlender, fehlerhaften formularfeldeingaben*/
var ausgabe = "Fehlerhafte Eingabe in folgenden Feldern:\n";
/*defintionen für reguläre ausdrücke
http://de.selfhtml.org/javascript/objekte/regexp.htm
definitionen, d.h. welche ausdrücke erlaubt sind, findet immer zwischen zwei // statt*/
/* das hausdächli ^ (alt + ^ + spacebar) bedeutet 1. buchstaben*/
/*alles was ich zulassen will für den 1. buchstabe steht innerhalb der eckigen klammern*/
/* + bedeutet es muss am anfang eines dieser zeichen vorkommen*/
/* $ zeichen bedeuten das ende der zeichenkette*/
/* leerzeichen ist \s\*/
/* * bedeutet das zeichen kann vorkommen, muss aber nicht vorkommen als 1. zeichen*/
/*definition für feld vor- und nachname*/
var regText= /^([a-zA-ZüÜäÄöÖéèàçâ])+([a-zA-ZüÜäÄöÖéèàçâ\-\.\s])*$/;
/*definitioen für feld strasse*/
/*zusätzlich müssen zahlen erlaubt sein auch an der 1. stelle, z.b. französische strassen*/
var regStrasse= /^([0-9a-zA-ZüÜäÄöÖéèàçâ])+([0-9a-zA-ZüÜäÄöÖéèàçâ\-\.\s])*$/;
/*definitioen für feld plz*/
/*nur 4 - 5 zahlen erlaubt wird mit geschlungenen klammern definiert {4,5} bedeutet min. 4 max 5 zahlen sind erlaubt*/
var regPLZ= /^[0-9]{4,5}$/;
/*definitioen für feld telefonfeld*/
/*zahlen sind erlaubt, abstand(\s), + zeichen, bindestriche, klammern (\( oder \) )*/
var regTelefon= /^[0-9\s\+\-\(\)]{9,30}$/;
/*definitioen für feld e-mail*/
/*zahlen sind erlaubt, als erstes zeichen darf es zahlen, buchstaben oder _ (kein sonderzeichen braucht zur definition keinen backslash)*/
/*nach 1. oder n. zeichen muss zwingend ein @ kommen*/
/*am schluss der adresse muss ein punkt kommen, d.h. nach stern backslash punkt *\. */
var regEmail= /^([a-zA-Z0-9_])+([a-zA-Z0-9_\.\-])*@([a-zA-Z0-9])+([a-zA-Z0-9_\.\-])+\.([a-zA-Z0-9]){2,6}$/;
/*überprüfung von vorname*/
/*abrufen von eingabe von feldinhalt per document.getElementById('idname').value; value für wert des feldes */
var eingabe = document.getElementById('vorname').value;
/*überprüfung ob überhaupt etwas eingegegben wurde und ob es den defintion der erlaubten zeichen von oben entspricht*/
/*wenn variable eingabe leer (==null)ist oder den regeln von oben entspricht, d.h. match(regText)*/
if (eingabe==""||(eingabe.match(regText)==null))
{
/*errormeldung für vorname*/
error [anzahlfehler] = "Vorname";
anzahlfehler++;
}
/*überprüfung von nachname*/
var eingabe = document.getElementById('nachname').value;
/*überprüfung ob überhaupt etwas eingegegben wurde und ob es den defintion der erlaubten zeichen von oben entspricht*/
/*wenn variable eingabe leer (==null)ist oder den regeln von oben entspricht, d.h. match(regText)*/
if (eingabe==""||(eingabe.match(regText)==null))
{
/*errormeldung für nachname*/
error [anzahlfehler] = "Nachname";
anzahlfehler++;
}
/*überprüfung von strasse*/
var eingabe = document.getElementById('strasse').value;
/*überprüfung ob überhaupt etwas eingegegben wurde und ob es den defintion der erlaubten zeichen von oben entspricht*/
/*wenn variable eingabe leer (==null)ist oder den regeln von oben entspricht, d.h. match(regText)*/
if (eingabe==""||(eingabe.match(regStrasse)==null))
{
/*errormeldung für strasse*/
error [anzahlfehler] = "Strasse";
anzahlfehler++;
}
/*überprüfung von PLZ*/
var eingabe = document.getElementById('plz').value;
/*überprüfung ob überhaupt etwas eingegegben wurde und ob es den defintion der erlaubten zeichen von oben entspricht*/
/*wenn variable eingabe leer (==null)ist oder den regeln von oben entspricht, d.h. match(regText)*/
if (eingabe==""||(eingabe.match(regPLZ)==null))
{
/*errormeldung für PLZ*/
error [anzahlfehler] = "PLZ";
anzahlfehler++;
}
/*überprüfung von ort*/
var eingabe = document.getElementById('ort').value;
/*überprüfung ob überhaupt etwas eingegegben wurde und ob es den defintino der erlaubten zeichen von oben entspricht*/
/*wenn variable eingabe leer (==null)ist oder den regeln von oben entspricht, d.h. match(regText)*/
if (eingabe==""||(eingabe.match(regText)==null))
{
/*errormeldung für ort*/
error [anzahlfehler] = "Ort";
anzahlfehler++;
}
/*überprüfung von email*/
var eingabe = document.getElementById('email').value;
/*überprüfung ob überhaupt etwas eingegegben wurde und ob es den defintino der erlaubten zeichen von oben entspricht*/
/*wenn variable eingabe leer (==null)ist oder den regeln von oben entspricht, d.h. match(regText)*/
if (eingabe==""||(eingabe.match(regEmail)==null))
{
/*errormeldung für email*/
error [anzahlfehler] = "E-Mail";
anzahlfehler++;
}
/*überprüfung von telefonnummer*/
var eingabe = document.getElementById('telefon').value;
/*überprüfung ob überhaupt etwas eingegegben wurde und ob es den defintino der erlaubten zeichen von oben entspricht*/
/*wenn variable eingabe leer (==null)ist oder den regeln von oben entspricht, d.h. match(regText)*/
if (eingabe==""||(eingabe.match(regTelefon)==null))
{
/*errormeldung für telefonnummer*/
error [anzahlfehler] = "Telefonnummer";
anzahlfehler++;
}
/*falls fehler vorhanden, zeige meldung an*/
if (anzahlfehler > 0)
{
for (i=0; i<anzahlfehler; i++)
{
ausgabe += error[i] + "\n"; /* "\n" steht für einen zeilenumbruch*/
}
alert (ausgabe);
/*sicherstellen, dass formular nicht doch verschickt wird benutz man return false*/
return false;
}
}
zugehörendes HTML:
<!--beginn des kontaktformulars-->
<form id="formular" name="formular" method="post" action="" onsubmit="return formcheck ()">
<fieldset>
<legend>Personalien</legend>
<label for="vorname" >Vorname: </label>
<input type="text" name="vorname"id="vorname" accesskey="v" tabindex="1" onblur="formcheck()"/>
<span style="color:#FF0000;visibility:hidden" id="errVorname">Bitte tragen Sie Ihren Vornamen ein!</span>
<label for="nachname">Nachname: </label>
<input type="text" name="nachname" id="nachname" accesskey="n" tabindex="2" onblur="formcheck()" />
<span style="color:#FF0000;visibility:hidden" id="errNachname">Bitte tragen Sie Ihren Nachnamen ein!</span>
<label for="strasse">Strasse:</label>
<input type="text" name="strasse" id="strasse" accesskey="s" tabindex="3" onblur="formcheck()" />
<span style="color:#FF0000;visibility:hidden" id="errStrasse">Bitte tragen Sie die Strasse ein!</span>
<label for="plz">PLZ:</label>
<input type="text" name="plz" id="plz" accesskey="p" tabindex="4" onblur="formcheck()"/>
<span style="color:#FF0000;visibility:hidden" id="errPlz">Bitte tragen Sie die PLZ ein!</span>
<label for="ort">Ort:</label>
<input type="text" name="ort" id="ort" accesskey="o" tabindex="5" onblur="formcheck()"/>
<span style="color:#FF0000;visibility:hidden" id="errOrt">Bitte tragen Sie den Ort ein!</span>
<label for="email">E-Mail:</label>
<input type="text" name="email" id="email" accesskey="e" tabindex="6" onblur="formcheck()"/>
<span style="color:#FF0000;visibility:hidden" id="errEmail">Bitte tragen Sie eine E-Mail Adresse ein!</span>
<label for="telefon">Telefon:</label>
<input type="text" name="telefon" id="telefon" accesskey="t" tabindex="7" onblur="formcheck()" />
<span style="color:#FF0000;visibility:hidden" id="errTelefon">Bitte tragen Sie Ihre Telefonnummer ein!</span>
<label for="senden"></label>
<input type="submit" name="Submit" value="Senden" tabindex="8" />
</fieldset>
</form>
Nur, wie gebe ich die Fehlermeldungen neben den Textfeldern aus (getElementById??? und ansprechen von Errormeldungen errErrorname) und formatiere die Textfelder entsprechend der Eingabe (falsch=rot, richtig=grün). Von der serverseitigen Validierung habe ich noch keine Vorlage.
Zudem ist ein PHP-Mailversand vorgesehen. Die Angaben im Mail müssen pro Tag in einem speziellen Ordner als CSV-Dateien gespeichert werden,UNIX-Zeitstempel als Dateiname. Als Routine sollen alle Dateien die älter als 30Tage sind gelöscht werden.Die Routine kann durch Anklicken einer Schaltfläche auf einer Seite ausgelöst werden.
Ich weiss, dass ist verdammt viel was ich verlange, leider habe ich kaum noch Zeit für die Vorbereitung neben 100% Berufstätigkeit! Bitte helft mir.Wenn jemand meinen Hilferuf hört, bin ich im zu tiefst dankbar!
Grüsse
Andi