Formularvalidierung mit Ajax
Formular-Prüfung

DeveloperIT-ProjekteSoftware

Die Überprüfung von Benutzereingaben gehört zu den aufwendigsten Aufgaben der Web-Entwicklung. Durch den Einsatz einer Ajax-Technik wird die Validierung von Webformularen zum Kinderspiel.

Validierung ohne Ajax

Formularvalidierung mit Ajax

In Zeiten vor Ajax gab es drei Möglichkeiten, wie mit Formularinhalten umgegangen werden konnte. Die einfachste, gleichzeitig aber auch benutzerunfreundlichste und gefährlichste ist, dass die Inhalte eines Formulars überhaupt nicht auf ihre Korrektheit überprüft werden.

Die zweite Möglichkeit ist die Überprüfung der Daten mit einem PHP-Skript. Dabei werden die Formulardaten an das PHP-Skript übertragen und auf ihre Richtigkeit hin überprüft. Vorteil dieser Lösung ist, dass die Überprüfung der Daten mit PHP einfach zu bewerkstelligen ist. Dies erkaufen Sie sich allerdings mit einigen schwerwiegenden Nachteilen. Das PHP-Skript ist im Fehlerfall dafür verantwortlich, das Formular mit allen eingegebenen Werten und Fehlermeldungen wiederherzustellen. Da dies bei großen Formularen einige Arbeit bedeuten kann, wird hier oft zu nicht gerade benutzerfreundlichen Lösungen gegriffen. Für den User bedeutet der jedes Mal nötige Seitenwechsel zudem, dass die Anwendung sich zäh bedient.

Die dritte Lösung ist eine Validierung auf Javascript-Basis. Im Gegensatz zu der PHP-Variante wird dem Benutzer nicht für jede Überprüfung ein Seitenwechsel aufgezwungen, wodurch sich die Bedienung deutlich vereinfacht. Während der Benutzer von diesem Verfahren profitiert, springt dabei für den Entwickler kaum ein Vorteil heraus. Er muss sich zum Großteil damit beschäftigen, aufwendigen Javascript-Code zu schreiben und diesen auch mit verschiedenen Browsern zu testen. Selbstverständlich kann dazu auch auf fertige Bibliotheken zurückgegriffen werden, die die Arbeit deutlich vereinfachen. Ein Nachteil bleibt jedoch: Mit Javascript lassen sich naturbedingt nicht alle Eingaben überprüfen. Manche Felder erfordern es, dass sie anhand von Einträgen einer Datenbank überprüft werden, beispielsweise Kundennummern. An Skripts auf dem Server kommt man hier nicht vorbei.


Validierung mit Ajax

Formularvalidierung mit Ajax

Mit Ajax lässt sich eine Formularvalidierung erstellen, die sich die Stärken aller Lösungen zu Nutze macht, ohne mit ihren Problemen behaftet zu sein.

Durch die Verwendung von Ajax ist kein langsamer Seitenwechsel notwendig, um die Validierung vorzunehmen, und es kann die volle Leistungsfähigkeit von PHP genutzt werden, um die Eingaben zu prüfen. Dazu werden die Daten im Hintergrund an den Server übertragen. Dieser kümmert sich um die Überprüfung aller Werte, eventuell auch anhand von Einträgen aus einer Datenbank. Die Ergebnisse dieser Überprüfung werden an den Client geschickt, der sie im Fehlerfall in aussagekräftige Hinweise für den Benutzer umsetzen kann. Das alles geschieht für den Benutzer verborgen im Hintergrund.

Für die folgenden Beispiele kommt Ajason als Ajax-Framework zum Einsatz. Dieses Open-Source-Projekt bietet alles, was für die Validierung eines Formulars per Ajax notwendig ist. Zur einfacheren Verarbeitung der Formulardaten aus Javascript heraus wird die Prototype-Bibliothek verwendet. Prototype bietet neben vielen anderen Möglichkeiten auch einige Shortcut-Funktionen, die hier zum Einsatz kommen. So können die beiden folgenden Javascript-Befehle


var field = document.getElementById(id);
value=document.getElementById(id).value;

durch einfachere Prototype-Konstrukte ersetzt werden, was eine Menge Tipparbeit erspart und einfacher lesbar ist.


var field = $(id);
value = $F(id);


Die Client-Seite

Formularvalidierung mit Ajax

Die Umsetzung ist kein Hexenwerk. Die Vorbereitung beginnt auf der Client-Seite. Jedem HTML-Formular geben Sie mit dem Argument action eine Zielseite vor, die aufgerufen wird, wenn der Benutzer mit einem Klick auf einen Submit-Button das Formular abschickt. Da die Überprüfung des Inhalts stattfinden soll, bevor die Daten an den Server geschickt werden, ist es notwendig, ein wenig Javascript-Code zwischenzuschalten. Dazu definieren Sie eine Funktion für den onSubmit-Eventhandler.


Dies bringt einige Veränderungen mit sich. Das Formular wird nur dann abgeschickt, wenn die so aufgerufene Funktion validate den Wert true zurückliefert. Dies schafft die Möglichkeit die Überprüfung per Ajax vorzunehmen. Idealerweise würde die Funktion validate also so aussehen:


function validate() {
Ergebnis = Ajax_Server_Validierung();
return Ergebnis;
}


Erste Hürden

Formularvalidierung mit Ajax

Leider ist es nicht ganz so einfach. Ajax steht bekanntlich für Asynchronous Javascript and XML. Die asynchrone Verarbeitung der Zugriffe macht die Aufgabe ein wenig schwieriger als erwartet. Der dem Funktionsaufruf folgende Code wird sofort nach dem Aufruf einer Ajax-Funktion weiterverarbeitet, ohne auf das Ergebnis zu warten. Das hat im Fall der validate-Funktion zur Folge, dass das Ergebnis der Überprüfung nicht während ihrer Abarbeitung zur Verfügung steht. Aus diesem Grund muss die Funktion false als Ergebnis zurückliefern. Das Formular wird dadurch erst einmal nicht abgeschickt.

Dies übernimmt eine weitere Methode, die aufgerufen wird, wenn der Ajax-Aufruf beendet wurde. In dieser sogenannten Callback-Funktion sendet dann der Server anhand der Ergebnisse das Formular ab, wenn alle Daten korrekt sind. Andernfalls wird der Benutzer informiert und um eine Korrektur gebeten.


function cb_validation(result) {
if (result.length == 0) {
//--- Keine Probleme
$('myform').submit();
}
else {
//--- Fehlerhafte Eingaben!
//--- Ausgabe einer Fehlermeldung
}
}

Bis auf das Feedback im Fehlerfall, auf das später noch genauer eingegangen wird, ist damit die Entwicklung der Client-Seite abgeschlossen.


Die Serverseite

Formularvalidierung mit Ajax

Da die eigentliche Überprüfung der Daten auf dem Server stattfindet, müssen Sie dem zuständigen Serverskript zur Überprüfung selbstverständlich die Daten liefern. Dazu verpacken Sie die Werte der einzelnen Felder in ein Objekt und übermitteln dieses an den Server.


function validate() {
var values = new Object();
values.lastname = $F('lastname');
values.custno = $F('custno');
...
ajax_validateSrv(values, cb_validate);
return false;
}

Mit dem Aufruf der Funktion ajax_validateSrv wird vom Ajax-Framework die Funktion validateSrv im Serverskript aufgerufen. Die Ajax-Bibliothek Ajason kümmert sich dabei auch darum, dass das Werte-Objekt später auf der Serverseite mit allen Einträgen verwendet werden kann.

In der Server-Funktion findet nun die eigentliche Überprüfung der Felder statt. Da von PHP aus auch Zugriffe auf eine Datenbank möglich sind, können Sie auch Felder überprüfen, die von bereits gespeicherten Daten abhängig sind. So können Sie beispielsweise kontrollieren, ob die übergebene Kundennummer für den eingegebenen Namen auch korrekt ist. Das folgende Listing zeigt einen gekürzten Ausschnitt einer Validierung.


function validateSrv($objFields) {
...
$value = $objFields->lastname;
if (strlen($value) == 0) {
$error[0]='lastname';
$error[1]='Nachname: Kein Eintrag';
$arrErrors[]=$error;
}

Entspricht ein Feldwert nicht dem erwarteten Inhalt, so wird der Fehler in einem Array ($arrErrors) vermerkt. Dazu werden der Feldname und eine Fehlermeldung zugeordnet. Dieses Array wird an die Client-Seite zurückgeliefert und kann dort dazu verwendet werden, den Benutzer auf die fehlerhaften Felder hinzuweisen.


Fehler melden, Mitteilung erzeugen

Formularvalidierung mit Ajax

Was bleibt, ist die Information des Benutzers im Fehlerfall. Da die Seite nicht neu geladen wird, müssen Sie bereits vorab einen Bereich für Fehlermeldungen definieren. Dies kann ein div-Bereich sein, den Sie zu Beginn unsichtbar schalten.

Dieser Bereich dient zur Ausgabe der gesammelten Fehler. Dazu werden die Ergebnisse des Serverskripts in der Callback-Funktion cb_validate verwendet, um eine Fehlermeldung zu erzeugen und auszugeben.


function cb_validate(result) {
...
strError = 'Folgende Felder sind fehlerhaft:';
for (i=0; i strError += result[i][1];
}
$('feedback').innerHTML=strError;
$('feedback').style.display='block';
...
}


Fehler mit Stil

Formularvalidierung mit Ajax

Ein wenig CSS macht das Ergebnis der Überprüfung optisch ansprechender und übersichtlicher. Mit ein paar Zeilen Code gestalten Sie die Fehlerausgabe besser:


#feedback {
border: 1px solid gray;
border: 1px solid red;
background: #FFFDE2;
}

Den letzten Schliff bekommt das Formular durch die Verwendung einer Stylesheet-Klasse für die farbliche Hervorhebung fehlerhafter Felder:


.error {
padding-right: 16px;
border: 1px solid red;
background-color: #FFFCE2;
background-image: url(images/warning_obj.gif);
background-position: right;
background-repeat: no-repeat;
}

Dieses Stylesheet wird allen Feldern zugewiesen, die vom Serverskript als falsch deklariert wurden.


function cb_validate(result) {
...
for (i=0; i $(result[i][0]).className= 'error';
}
...
}

Vor jeder Validierung müssen Sie die Felder wieder auf ihren ursprünglichen Stil zurücksetzen, sonst bleibt das Fehler-Stylesheet erhalten, auch wenn bei der nächsten Validierung das Feld als korrekt deklariert wurde. Das Zurücksetzen erledigen Sie sinnvollerweise in der bereits vorhandenen validate-Funktion, vor dem Aufruf der Ajax-Validierungsprozedur.


Verteilte Validierung

Formularvalidierung mit Ajax

Da die Überprüfung des Formulars von der Client-Seite aus angestoßen wird, ist es problemlos möglich, einfache Überprüfungen per Javascript vorab vorzunehmen und nur die Teile auf dem Server überprüfen zu lassen, die wirklich notwendig sind. Aber warum so kompliziert? Warum nicht alles auf Serverseite überprüfen?

Eine reine Client-seitige Validierung ist in der Regel schneller als eine serverseitige, da Sie die Geschwindigkeit der Internetverbindung bei der Entwicklung außer Acht lassen können. Zudem bedeutet jeder Ajax-Aufruf einen Zugriff auf den Server und damit eine zusätzliche Belastung – bei vielbesuchten Seiten ist dies ein nicht zu unterschätzendes Argument.

So könnten beispielsweise die Adressdaten des Beispiels komplett mit Javascript überprüft werden. Nur wenn dort keine Fehler auftreten, würde die weitere Validierung auf dem Server stattfinden.


Fazit

Formularvalidierung mit Ajax

Eine Ajax-basierte Formularüberprüfung ist allen anderen Lösungen weit überlegen. Sowohl die Benutzer als auch die Entwickler ziehen Vorteile aus der Kombination von Client-seitiger Überprüfung mit Javascript und der Möglichkeit, bestimmte Daten auf der Serverseite überprüfen zu lassen. Durch den Einsatz eines Ajax-Frameworks wird die Validierung außerdem so weit vereinfacht, dass die Entwicklung auch bei komplexen Formularen sehr schnell von der Hand geht.

Die abgedruckten Beispiele enthalten natürlich nicht den kompletten notwendigen Quellcode. Wer sich näher mit der Materie beschäftigen möchte, dem bieten die ausführlicheren Sourcecodes auf der Heft-CD und unter listings.internet-pro.de eine gute Ausgangsbasis für weitere Experimente.

Das gezeigte Vorgehen birgt noch einiges an Verbesserungspotenzial. So müssen bislang die zu validierenden Daten noch einzeln gesammelt und in ein Array verpackt werden. Zudem ist für die Ausgabe der Fehler noch Handarbeit notwendig.

Vielleicht dienen die hier gezeigten Ansätze als Ausgangspunkt für ein Framework, das all diese Aufgaben teilautomatisch erfüllt und bislang fehlende Funktionen nachrüstet.