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 ! ;))

validation-de-formulaire-jquery-js

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.

Source

Bon code à tous !

Articles qui peuvent vous intéresser :

Author: Franck Pertegas

Share This Post On

5 Comments

  1. 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?

    Post a Reply
  2. 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é.

    Post a Reply
  3. Même si cela date un petit peu, merci pour cet article!

    Post a Reply

Trackbacks/Pingbacks

  1. jQuery Favicon Notifier – Plugin jQuery – Modifiez vos favicons à la volée via jQuery | LudiBlog - [...] jQuery – Validation – Plugin de validation de formulaire [...]
  2. Liste de tous les plugins jQuery testés sur le blog | LudiBlog - [...] de textes quickSearch jQuery Validation Select Text Searcher MarkItUp ! [...]

Submit a Comment

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *