Formularprüfung
Autor
Flitze
Klicks 16497
Bewertungen 12
Rating 3.9
Stand 01.12.2013
Keywords:
Formulare, Vollständigkeit, Länge, Eingabefelder, Checkboxen, Fehlerausgabe, vor dem Senden, Abschicken, prüfen, checken, ausgeben
Klicks 16497
Bewertungen 12
Rating 3.9
Stand 01.12.2013
Keywords:
Formulare, Vollständigkeit, Länge, Eingabefelder, Checkboxen, Fehlerausgabe, vor dem Senden, Abschicken, prüfen, checken, ausgeben
Breadcrumb:
Tipps » Formularprüfung
Bei diesem Tipp zeige ich euch eine Möglichkeit auf, Formulardaten mittels JavaScript vor dem Übetragen der Daten zu überprüfen. Der Vorteil dabei liegt zum einen in der Geschwindigkeit und zum anderen in der Erhaltung der Daten. Dadurch, dass die Daten nicht erst an den Server gesendet werden müssen, bekommt der User sofort eine Nachricht bezüglich der Fehlermeldungen. Da die Daten bei fehlerhafter Eingabe gar nicht erst gesendet werden, bleiben sie auch weiterhin in dem Formularfeld und müssen nicht erneut eingegeben werden.Zur Realisierung habe ich zwei Funktionen entwickelt:
1. trim()
Code:
function trim (str) {
return (str.replace("\s+$","").replace("^\s+",""));
}Diese Funktion entspricht in etwa der PHP-Funktion trim(). Diese entfernt Whitespaces am Anfang und am Ende eines Strings.
2. checkEingaben()
PHP:
// Prüft die Eingabe von Daten in Formularen
function checkEingaben(formular, felderstring, ausgabestring)
{
// Aufteilen des Felderstrings, enthält die Namen der zu prüfenden Felder
var felder = felderstring.split(",");
if(trim(ausgabestring)=='')
ausgabestring = felderstring;
// Aufteilen des Ausgabestrings, enthält den Ausgabetext für die Fehlermeldung
var ausgabe = ausgabestring.split(",");
var errors = new Array();
for (var key in felder){
// Prüft, ob in ein Eingabefeld etwas eingegeben wurde oder, falls es sich um eine checkbox handelt, ob diese aktiviert wurde
if(document.forms[formular].elements[felder[key]] &&
(trim(document.forms[formular].elements[felder[key]].value) == "" ||
(document.forms[formular].elements[felder[key]].type == 'checkbox' &&
document.forms[formular].elements[felder[key]].checked != true )
)
)
errors[errors.length] = ausgabe[key];
}
// wurde in einem Feld, dass überprüft werden soll, keine Eingabe gemacht,..
if(errors.length != 0){
var errorString = "";
// ..wird eine entsprechende Fehlermeldung generiert
for(error in errors)
errorString += errors[error] + "\n";
alert("Bitte füllen Sie folgende Felder aus:\n" + errorString);
return false;
}
return true;
}
Die Funktion führt die eigentliche Prüfung durch. Sie erwartet drei Parameter
Code:
function checkEingaben(formular, felderstring, ausgabestring)
formular
enthält das name-Attribut des zu prüfenden Formulars
felderstring
enthält die name-Attribute der zu prüfenden Elemente
ausgabestring
enthält die Ausgabenamen für die Fehlermeldung
Im felderstring und ausgabestring werden die Namen der einzelnen Eingabe-Elemente durch ',' getrennt übergeben. Wenn man für ausgabestring einen leeren string '' übergibt, ensprechen die Ausgabenamen in der Fehlermeldung den Namen der Eingabe-Elemente.
Beide Strings müssen gleich viele durch ',' getrennte Namen bekommen.
Mittels split werden die beiden Strings nach jedem ',' getrennt und die Teilstrings in einem Array gespeichert. Dann wird ein Fehlerarray erzeugt, in dem evtl. auftretende Fehlermedungen gespeichert werden.
PHP:
var errors = new Array();
Durch eine for-in-Schleife werden dann alle Elemente nacheinander geprüft.
PHP:
document.forms[formular].elements[felder[key]]
// prüft, ob das Element überhaupt existiert
trim(document.forms[formular].elements[felder[key]].value) == ""
// prüft unter Verwendung von trim, ob das Element leer ist
document.forms[formular].elements[felder[key]].type == 'checkbox' &&
document.forms[formular].elements[felder[key]].checked != true
// prüft, ob das Elemnt eine Checkbox ist und falls ja, ob sie gecheckt wurde
Tritt ein Fehler auf, wir der Ausgabename im Fehlerarray gespeichert
PHP:
errors[errors.length] = ausgabe[key];
Nachdem alle Elemente geprüft wurden, wird überprüft, ob irgendwo ein Fehler auftrat. Falls dies der Fall ist, wird eine entsprechende Fehlermeldung generiert und false zurückgegeben.
PHP:
if(errors.length != 0){
var errorString = "";
for(error in errors)
errorString += errors[error] + "\n";
alert("Bitte füllen Sie folgende Felder aus:\n" + errorString);
return false;
}
Wurde kein Fehler gefunden, gibt die Funktion true zurück.
Der Aufruf im Formular sieht folgendermaßen aus:
Code:
<form name="Gaestebuch"
action="index.php?section=gaestebuch"
method="post"
accept-charset="ISO-8859-1"
onSubmit="return checkEingaben('Gaestebuch', 'Name,Inhalt', 'Name,Nachricht')">
Name*: <input type="text" name="Name"><br>
Email: <input type="text" name="Email"><br>
Homepage: <input type="text" name="Homepage"><br>
Nachricht*: <textarea name="Inhalt"></textarea>
</form>Den Einsatz dieser Funktion könnt ihr z.B. unter Gästebuch testen.
Anmerkung
Ihr solltet euch bei der Formularprüfung aber NIE nur auf Javscript verlassen, da Javascript vom Anwender deaktiviert werden kann. Eine serverseitige Prüfung der Daten ist daher unerlässlich. Ein Tutorial dazu findet ihr unter Formularprüfung. Falls ihr eher der Java-Programmierer seid, dann hilft euch dieses Java Tutorial zu Formularprüfung weiter. Das Java != JavaScript ist, muss ich hoffentlich nicht noch extra erwähnen
Bewerten
Suchmaschinenoptimierung (SEO - Search Engine Optimization)
