Validation côté client avec prototype et Dexagogo

Avertissement

Ce billet n’est pas interdit au moins de 16 ans mais le vocabulaire et les termes employés sont assez techniques. Le sujet abordé étant la validation de champs de formulaire côté client, ce billet pourrait heurter les âmes sensibles. Je demanderai donc aux plus fragiles d’entre vous de s’écarter et de laisser les geeks s’approcher.

Je concours pour le message d’erreur le plus drôle du web. Postez un commentaire sur ce blog, sans remplir le champ « commentaire » (histoire d’obtenir une erreur justement), et vous obtiendrez un magnifique message dont la drôlitude n’a d’égal que l’élégance de la solution adoptée pour l’afficher.

Ce blog utilise désormais validation.js de Dexagogo (alias Andrew Tetlaw) pour les contrôles de champs de formulaire. Ce script fonctionne avec prototype. Le tout fait 48ko (prototype) + 8 ko pour le script de validation lui même. Sa mise en oeuvre est d’une simplicité à pleurer :

1. il faut appeler les 2 librairies prototype et validation,
   <script type="text/javascript" src="http://blog.barbayellow.com/wp-includes/js/prototype.js"></script>
<script type="text/javascript" src="http://blog.barbayellow.com/wp-includes/js/validation.js"></script>
2. instancier un objet Validation,
   <script type="text/javascript">
new Validation('commentform'); // où 'commentform' est l'id du formulaire
</script>
3. et rajouter sur les champs que vous souhaitez contrôler une class « required »:
   <input type="text" name="monchamps" id="monchamps" class="required" />

Hola hola 8ko rien que pour valider des champs ? Autant écrire son propre script !

me direz-vous du ton lourd de reproche qui est le vôtre.

Oui mais non !

vous répondrai-je avec le ton plein d’enthousiasme qui est le mien.

Déjà 8ko c’est pas la mort. Ensuite, les formulaires sont quand même l’élément d’interaction de base d’un site web. S’il y en a un truc à soigner sur votre site, c’est bien ça. Enfin, pour à peine 8ko, validation.js offre tout un tas de type de validations (qui correspondent à autant de class à associer à vos <input>):

• required (champs à remplir, de n’importe quoi, mais à remplir)
• validate-number (un nombre valide)
• validate-digits (chiffres uniquement)
• validate-alpha (lettres uniquement)
• validate-alphanum (des chiffres et des lettres)
• validate-date (date au format anglosaxon)
• validate-email (une adresse mail valide – mon préféré – utilisé sur le formulaire de ce blog)
• validate-url (une url valide – utilisé sur le formulaire de ce blog)
• validate-date-au (date au format frenchy : jj/mm/aaa)
• validate-currency-dollar (que des dollars – celui là c’est pour les sites riches uniquement)
• validate-one-required (dans un ensemble de check box ou radio button encadrés par un div, oblige l’utilisateur à en checker au moins un)

Et comme si c’était pas déjà assez (pas très français ça), vous pouvez en plus rajouter vos propres contrôles :

<script type="text/javascript">
// là on crée une nouvelle méthode pour l'objet Validation
// par exemple un contrôle pour les champs select
Validation.add('validate-select', 'Ce champs est obligatoire.', function(v,elm) {
return (elm.selectedIndex != "0");
})
new Validation('commentform'); // où 'commentform' est l'id du formulaire
</script>

Enfin, ce script ne bloque pas la soumission du formulaire pour ceux qui n’ont pas javascript activé (d’où l’importance des contrôles côté serveur), il n’utilise pas de onclick ou de onsubmit tout crado mais plutôt le Event.observe tout propre de prototype. Bref, idéal.

Je vous invite à regarder dans le code source de cette page pour voir un exemple d’utilisation de ce script. Vous pouvez également consulter mon delicious au tag validation pour plus d’informations sur validation.js car il y a encore d’autres fonctionnalités dont je n’ai pas parlé ici (personnalisation des messages d’erreur, contrôle du comportement du validateur… ).