jQuery – Validation – Plugin de validation de formulaire
On a toujours besoin de vérifier et faire valider nos formulaires pour nos sites internet. Alors aujourd’hui, je vous présente un plugin jQuery qui va vous permettre de procéder plus facilement à la première couche de filtre coté client pour vos formulaires (une couche qui n’empêche pas de devoir en ajouter une coté serveur hein ! ;))
Rendez-vous donc sur github pour télécharger le plugin et vous pouvez visionner les démo ici si vous le souhaitez.
Alors comment fonctionne ce plugin de validation de formulaire pour jQuery :
1/ Intégration de la librairie jQuery et du plugin :
[pastacode lang= »markup » manual= »%3Cscript%20src%3D%22http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.6%2Fjquery.min.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E%0A%3Cscript%20src%3D%22js%2Fjquery.validationEngine-en.js%22%20type%3D%22text%2Fjavascript%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3E%0A%3Cscript%20src%3D%22js%2Fjquery.validationEngine.js%22%20type%3D%22text%2Fjavascript%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]
On peut voir que l’on intègre un fichier js de langue, pour le Français, il suffit d’appeler le fichier fr à la place, comme ceci :
[pastacode lang= »markup » manual= »%3Cscript%20src%3D%22js%2Fjquery.validationEngine-fr.js%22%20type%3D%22text%2Fjavascript%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]
2/ Imaginons une structure de formulaire comme ceci :
[pastacode lang= »markup » manual= »%3Cform%20id%3D%22validate_form%22%20action%3D%22traitement.php%22%20method%3D%22post%22%3E%3Cinput%20id%3D%22email%22%20name%3D%22email%22%20type%3D%22text%22%20value%3D%22someone%40nowhere.com%22%20%2F%3E%0A%3Cinput%20id%3D%22date%22%20name%3D%22date%22%20type%3D%22text%22%20value%3D%222010-12-01%22%20%2F%3E%0A%3Cinput%20id%3D%22special%22%20name%3D%22special%22%20type%3D%22text%22%20value%3D%22too%20many%20spaces%20obviously%22%20%2F%3E%0A%3Cinput%20name%3D%22send%22%20type%3D%22submit%22%20value%3D%22envoyer%22%20%2F%3E%3C%2Fform%3E%5B%2Fcc%5D%0A%0A » message= » » highlight= » » provider= »manual »/]
3/ nous allons donc activer la validation sur le formulaire comme ceci :
[pastacode lang= »javascript » manual= »%3Cscript%3E%0A%24(document).ready(function()%7B%0A%20%20%20%20%24(%22%23validate_form%22).validationEngine()%3B%0A%20%20%20%7D)%3B%0A%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]
4/ Il suffira de mettre les conditions de validation dans les attributs « class » de vos balises input, ce qui peut donner ceci :
[pastacode lang= »markup » manual= »%3Cform%20id%3D%22validate_form%22%20action%3D%22traitement.php%22%20method%3D%22post%22%3E%3Cinput%20id%3D%22email%22%20class%3D%22validate%5Brequired%2Ccustom%5Bemail%5D%5D%22%20name%3D%22email%22%20type%3D%22text%22%20value%3D%22someone%40nowhere.com%22%20%2F%3E%0A%3Cinput%20id%3D%22date%22%20class%3D%22validate%5Brequired%2Ccustom%5Bdate%5D%5D%22%20name%3D%22date%22%20type%3D%22text%22%20value%3D%222010-12-01%22%20%2F%3E%0A%3Cinput%20id%3D%22special%22%20class%3D%22validate%5Brequired%2Ccustom%5BonlyLetterNumber%5D%5D%22%20name%3D%22special%22%20type%3D%22text%22%20value%3D%22too%20many%20spaces%20obviously%22%20%2F%3E%0A%3Cinput%20name%3D%22send%22%20type%3D%22submit%22%20value%3D%22envoyer%22%20%2F%3E%3C%2Fform%3E » message= » » highlight= » » provider= »manual »/]
Et voilà, vous avez votre formulaire équipé d’un filtre de validation via jQuery. Cet exemple, permet d’obliger l’internaute à entrer une adresse e-mail requise et valide, une date requise et valide, ainsi que du texte requis et composé essentiellement de lettre et de chiffres.
Toutes les options sont disponibles sur la documentation du plugin, disponible ici.
Bon code à tous !
Articles qui peuvent vous intéresser :
8 août 2011
Comme d’habitude, article très intéressant.
Je vais tester un peu cette méthode de création d’un site internet. Cela peut être efficace et améliorer le site.
Une question aussi, tu parlais dans un article de problèmes avec IE, mais comment en régler quand cela vient avec firefox?
8 août 2011
Bonjour,
Concernant Firefox, tout dépend du problème. Avec jQuery, en utilisant les dernières versions il ne doit pas avoir de problème de compatibilité.
23 août 2011
Bonjour,
Il va m’être très utile ce plugin jQuery !!
Merci 🙂
30 mars 2016
Même si cela date un petit peu, merci pour cet article!
28 avril 2016
Bonjour, excellent article. En ce moment, j’ai pu manipuler et utiliser un plugin JQuery en me basant sur des vidéos sur http://www.alphorm.com/tutoriel/formation-en-ligne-jquery et je dois dire que ça marche bien. En tout cas, cet article est très réussi.