Live Validierung mit dem Zend Framework und jQuery

Seit geraumer Zeit arbeite ich mit dem Zend Framework und die wirklich gute Dokumentation läßt kaum Wünsche offen. Christian Vogt von hackthenet.de hat mich auf den jQuery-Trip gebracht, weswegen jQuery dann auch mein Wegbegleiter war, als es darum ging Zend_Form eine Livevalidierung zu verpassen.

Eins nach dem anderen

Vorweg gibt es erst einmal das fertige Beispiel zu bewundern und natürlich zum Download (2.0 MB, inklusive dem Zend Framework 1.5.1). Nun aber frisch ans Werk.

Zend_Form

Am Anfang habe ich mich ein wenig dagegen gesträubt Zend_Form einzusetzen, da es sich mir irgendwie widersetzte, die Formularerstellung in separate Dateien auszulagern, weil es ja Teil des Views sein sollte. Teil des Views sind die Formulare natürlich weiterhin, allein die Erstellung wird in Klassen verlegt, die jeweils von Zend_Form erben, welche schon einen Großteil von äußerst nützlichen Methoden mitbringt.
Im Gegensatz zu den anderen Frameworks wie CakePHP und Rails, werden die Validierungsregeln nicht im Model festgelegt, sondern in der von Zend_Form abgeleiteten Klasse.
Speziell für das erstellte Element, was dann folgendermaßen aussehen kann:

In die init-Methode kommt die Erstellung der Formularelemente, in diesem Fall $username welche als Zend_Form_Element_Text initialisiert wird und damit ein normales Inputfeld mit dem Namen username wird. In Zeile acht und neun fügen wir dem Objekt dann die Validierungsregeln hinzu — nur alphanumerische Zeichen und nicht leer — welche beim Abschicken des Formulares überprüft werden. $this->addElements(array($username)); in Zeile acht fügt dem Formular das so eben erstellte Element hinzu, damit es bei der Ausgabe berücksichtig wird.
Für die Validierung via Ajax ganz wichtig ist Zeile 10, da wir dort dem Element die Klasse required geben, anhand dessen wir später die zu überprüfenden Felder einfacher auslesen können.

Hinweis: Sollte einem Formular nur ein Element hinzugefügt werden, kann dies auch folgendermaßen geschehen: $this->addElement($element).

Aktion im Controller

Im Controller, der die Benutzerinteraktion mit dem View und dem Model koordiniert, übergeben wir dann das fertig erstellte Formular an das View und überprüfen auch direkt auf die Richtigkeit der Eingaben — per Button abgeschickte, sowie die, die über den XmlRequest reinkommen. Erst der Code, dann die Erklärung:

Nachdem wir in Zeile fünf unser Formular initialisiert haben, überprüfen wir danach, ob ein Post-Request vorliegt und speichern die Werte des Formulars, im Falle des Falles, zwischen. In Zeile elf schauen wir nun, ob die Anfrage über einen XmlRequest gestartet wurde. Sollte dies der Fall sein, deaktivieren wir die Ausgabe des Views — wir benötigen in der Antwort ja nur die Fehlermeldung — verarbeiten die Ajaxanfrage via $signupForm->processAjax($formData), und geben eventuelle Fehlermeldung im JSON-Format zurück, welches auch jQuery ohne Probleme versteht.

Hinweis: Die Methode processAjax benötigt nicht alle Daten für das Formular, sondern kann diese auch teilweise verarbeiten was sich für die Livevalidierung anbietet, da dabei nicht alle Daten einmal vorhanden sind.

Sollte kein Ajaxrequest vorliegen, überprüfen wir via isValid das vollständige Formular und geben bei Bedarf automatisch die Fehlermeldung aus. Wir erinnern uns: die Validierungsregeln haben wir ja bereits beim Anlegen der Form_Signup angelegt.

Ich seh' dich!

Was wäre das schönste Formular ohne die eigentlich Ausgabe, und deshalb freut es mich umso mehr, dass dieser Abschnitt der kürzeste wird:

Das war's. Da Zend_Form eine magische __toString Methode mitbringt, die die ganze Umwandlung in sauberen XHTML-Code erledigt, können wir den PHP-Teil abschließen und zu jQuery übergehen.

Hinweis: Das ist übringens ein schöner Vorteil, wenn man sich auf die Nutzung von Zend_Form einlässt. Das Formular bläht den eigentlich HTML-Code nicht mehr unnötig auf und das Formular lässt sich natürlich auch an jeder beliebig anderen Stellen erstellen und einbinden. DRY in Perfektion.

jQuery, ick liebe dir

Die eigentlichen Vorbereitungen sind abgeschlossen, nun geht es an den Teil, der den ganzen Prozess anstoßen wird und die Livevalidierung startet. Gleiches Prozedere, erst der Code dann die Erklärung:

Sobald der DOM fertig gerendert ist, suchen wir nach allen Elementen, die die required-Klasse besitzen, um diese dann mit einem keydown-Event auszurüsten, was nur abgefeuert wird, sofern nach der Benutzereingabe eine halbe Sekunde vergangen ist. Angefragt wird unserer index-Action aus der Controller mit dem Wert aus dem aktuell geänderten Feld. Durch das json in Zeile neun bekommen wir die zurückgelieferten Daten vom Zend Framework direkt passend aufbereitet und brauchen diese nur noch in den DOM inizieren.

Das war's!

Naja, vielleicht nicht so ganz: Da bliebe die Frage offen, wie man zum Beispiel zwei Felder mit einandern vergleichen kann, was ganz nützlich bei wiederholender E-Mail- oder Passworteingabe sein kann. Meine Erklärung geht auch nicht näher auf die Zend_Form_Decorators ein, die aber in meinem Beispiel auftauchen, welches ich zum Download anbiete. Das wäre auch ein Teil, den ich eventuell in einem anderen Artikel berücksichtige, der aber den Rahmen dieses Artikel jetzt sprengen würde. Ebenso das Anpassen der Fehlermeldungen, was meinem Geschmack nach noch irgendwie ein wenig umständlich mit Zend_Forms gelöst ist. Vielleicht hat da ja wer einen Tipp?

Abschließen bleibt mir nur zu sagen, dass ich mich über konstruktive Kritik sehr freuen würde, auch unter dem Aspekt, dass dies mein erster Versuch ist eine Technik zu erklären, mit der ich mich selber noch beschäftige. Ich hoffe natürlich, dass das Beispiel keine Fehler hat, ebenso wie dieser Artikel, falls dies nicht so sein sollte, schreibt mir doch bitte eben einen Kommentar und ich bessere, so schnell wie es mir möglich ist, aus. Viel Spaß!