Ayant commencé à étudier le problème (en trois mois, il était temps ), j’ai en premier lieu avancé sur la problématique côté client : avoir un rendu des erreurs Mootools identique aux erreurs Zend_Form.

Vu la lourdeur qu’implique la modification des Zend_Form_Decorator pour chaque élément, j’ai pris le partis de minimiser ces modifications en adaptant tant que possible le CSS pour avoir la présentation souhaitée. Cette façon de faire convient pour la majorité des formulaires, ça serait dommage de s’en priver… Sur cette base, je souhaite donc que les validateurs Mootools produisent les même erreurs que mes Zend_Form.

Le fonctionnement du Form.Validator de Mootools est simple : on active la validation pour un formulaire, en affinant le comportement avec quelques options, et l’outil détermine les contrôles à effectuer en fonction des classes sur vos champs input : pas de liaison forte entre le client et le serveur, on se contente d’attribuer des classes.

Par exemple, prenons ce formulaire :

Notre champ input a deux classes assez particulière, minLength:3 et maxLength:20, qui vont permettre de vérifier côté client si le champ contient bien un texte entre 3 et 20 caractères.

Pour activer la validation, c’est simple, il suffit d’instancier Form.Validator :

Dés à présent, les validateurs seront sollicités sur les évènements onBlur (des champs input) et onSubmit (du formulaire).

Le Form.Validator de Mootools ne se charge « que » d’activer les validateurs et de stocker leur résultat : des évènements sont déclenchés, et il faut les utiliser pour gérer notamment l’affichage des erreurs.

Une implémentation plus complète est disponible via Form.Validator.Inline : cette classe permet d’afficher chaque erreur dans un bloc div pour chaque champ concerné. Pour l’utiliser, il suffit simplement d’instancier Form.Validator.Inline au lieu de Form.Validator :

Pour les intéressés, vous trouverez la documentation ici :

http://mootools.net/docs/more/Forms/Form.Validator

Et là :

http://mootools.net/docs/more/Forms/Form.Validator.Inline

En m’inspirant un peu du code source du Form.Validator.Inline, j’ai donc conçu une ébauche de Form.Validator.List. Cette classe permet d’afficher les erreurs sous forme de liste ul, exactement comme le Zend_Form_Decorator_Errors. De cette manière, je peux alterner contrôles côté client et côté serveur sans que l’affichage ne change pour l’utilisateur.

Je vous invite à jeter un oeil du côté du code sur le dépôt github :

http://github.com/lucascorbeaux/Form.Validator.List

Lorsque les travaux seront plus avancés et que le code sera mieux testé, je le déposerais sur la forge Mootools afin de toucher un plus large public. Pour ceux qui ne connaissent pas la forge mootools, on y trouve pas mal de plugins utiles et ça se trouve ici : http://mootools.net/forge/

Pour la petite histoire, il s’agit de ma première approche de github, et de la première fois que j’utilise git, n’ayant eut pour le moment que l’occasion de travailler sur SVN. Plus encore, il s’agit de ma première contribution, aussi modeste soit-elle… Ca fait longtemps que je voulais franchir le cap, c’est désormais chose faite ! Plus que jamais, tout commentaire, positif ou négatif, est plus que le bienvenue.

Petite update pour signaler la mise en ligne du plugin sur la forge Mootools : http://mootools.net/forge/p/form_validator_list

L’idée était, sur le papier, très sexy :

• Conception d’une classe Javascript de vérification réellement réutilisable, sans retoucher le code pour chaque formulaire.
• Uniformisation du contrôle client et serveur : si les spécifications du formulaire change, il suffit de modifier notre Zend_Form et tout le reste suis.

Seulement voilà, le projet était à petit budget, et si le volume d’utilisateur était faiblard, le mutualisé l’hébergeant l’était plus encore : s’ensuivait des freeze à chaque validation de formulaire, qui m’a complètement freiné dans l’utilisation sur le onblur des éléments au lieu du submit du form, ce qui faisait perdre une grosse partie de la réactivité (la validation client-side attendait sagement qu’on valide le formulaire pour se faire, ce qui était d’un intérêt discutable…).

Conclusion : c’était un bonheur à programmer, et une horreur à utiliser.

Depuis les besoins ont fait que je me suis « contenté » de formulaire à l’ancienne, avec une validation server-side only. Ayant eut beaucoup d’application métier à développer ça n’a pas choqué grand monde : les utilisateurs étaient contents, c’était carré, ça fonctionnait, c’était fluide. Mais il faut l’avouer, ça n’était pas très sexy.

Ce screencast a fait germer l’idée de refaire un essai, plus ambitieux, plus carré, mais tout aussi évolutif et maintenable.

Mon objectif ? Trouver une façon simple mais robuste de lier les Zend_Form au Form.Validator de Mootools, de façon à offrir un contrôle homogène entre server-side et client-side, sans appel Ajax superflu : on réservera les appels Ajax aux besoins dont le serveur est indispensable, notamment vérifier l’unicité d’une valeur dans une table.

Je réfléchis à un plan d’attaque, et on se tient au courant