5

Validation de formulaire – Plugin jQuery-Validation-Engine

Bonjour les amis.

Aujourd’hui, je vous présente un plugin JavaScript qui me tient à coeur. Il s’agit de jQuery-Validation-Engine réalisé par Position-Absolute. Ce plugin présente de nombreux avantages et je m’en vais de ce pas vous les présenter.

Une utilisation très simple

La première chose qui m’a séduit dans cet outil, c’est le côté simple d’utilisation. Pas besoin d’avoir 10 ans d’expérience dans le développement web pour réussir à comprendre la doc (qui, à l’instar de Beyonce,  est très bien foutu d’ailleurs). Il vous faudra cependant quelques connaissances dans la langue de Shakespeare (ou des One Direction selon vos références…)

Mise en place du plugin « jQuery Validation »

Ce plugin est basé sur jQuery, il vous faudra donc charger la célèbre librairie (Pourquoi pas via les Google Hosted Librairies ?)

<!-- Chargement de jQuery -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<!-- Chargement de jQuery-Validation-Engine (fichier de langue + script) -->
<script src="js/jquery.validationEngine-fr.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>

<!-- Chargement du CSS de jQuery-Validation-Engine -->
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>

Il n’y a plus qu’à appliquer notre script de validation sur le formulaire.

$(document).ready(function() {
    $("#inscription").validationEngine();
}); 

La manière la plus simple de mettre en place la validation est de passer par les classes HTML, un simple class="validate[required]" activera la vérification du champ. Une seconde méthode est disponible en passant par des attributs personnalisés. A vous de voir ce que vous préférez.

<input value="" class="validate[required]" type="text" name="mon_champ" id="mon_champ" />

Cette unique classe vous suffira à rendre ce champ obligatoire. Plutôt simple non ?

De nombreuses règles utilisables.

Le champ requis reste la base de ce que peut faire ce plugin. Il dispose d’énormément de règles prédéfinies. Je ne vais pas vous faire un listing complet de toutes les règles mais en voici quelques unes des plus courantes.

  • validate[required,custom[email]] : Je ne vous fais pas de dessin, le script va partir à la recherche d’un @ et d’un . dans la valeur histoire de voir si c’est une adresse mail valide.
  • validate[required,equals[mon_champ]] : la fonction equals va vous permettre de vérifier si un champ est égal à un autre. Pratique dans le cas de vérification de mot de passe.
  • validate[condRequired[mon_champ]] : Grâce à cette fonction, vous allez pouvoir rendre un champ obligatoire en fonction de l’état d’un autre.
  • validate[required,minSize[5]] : Vous pouvez aussi vérifier la taille de la valeur insérée dans le champ. Cette fonction existe aussi avec maxSize
  • validate[maxCheckbox[2]] : Un peu dans la même lignée que minSize et maxSize, ici vous vérifiez le nombre de checkbox cochées.

La possibilité de personnaliser les règles

Malgré toutes les règles disponibles, il n’est pas dit que vous n’ayez pas besoin de faire votre propre règle. Hé bien, sachez que c’est tout a fait envisageable !

Il vous faudra quand même quelques compétences en regexp pour définir votre règle, quoi qu’une recherche Google sur la regexp dont vous avez besoin devrait rapidement vous donnez satisfaction.

Une chose assez bien foutu dans ce plugin, c’est que la définition de vos règles se fera directement dans votre fichier JS de langue, ce qui veut simplement dire que pour rajouter vos règles, vous n’aurez pas besoin de toucher au corps du plugin.

Imaginons que nous voulions une adresse email, mais que nous ne voulions aucune adresse email venant de Gmail.com. Nous détestons Gmail. (En fait, on adore… mais c’est pour l’exemple…)

Voici la regex qui va filtrer tout ça :
\w+([-+.]\w+)*@(?!(gmail)\.com$)\w+([-.]\w+)*\.\w+([-.]\w+)*

Maintenant, il va falloir créer notre règle dans le plugin. Pour ce faire, ouvrez le fichier de langue dans votre IDE préféré.

Dupliquons par exemple la règle de base des mails.

Ce qui nous donne:

...
"email": {
    "regex": /^((([a-z]|\d|[!#\$%&'\*\+uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, // J'ai volontairement raccourci la regex pour une question de lisibilité
    "alertText": "* Adresse email invalide"
},
"email": {
    "regex": /^((([a-z]|\d|[!#\$%&'\*\+uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,
    "alertText": "* Adresse email invalide"
},
...

On transforme maintenant notre règle dupliquée. Appelons la nogmail…

...
"email": {
    "regex": /^((([a-z]|\d|[!#\$%&'\*\+uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, // J'ai volontairement raccourci la regex pour une question de lisibilité
    "alertText": "* Adresse email invalide"
},
"nogmail": {
    "regex": \w+([-+.]\w+)*@(?!(gmail)\.com$)\w+([-.]\w+)*\.\w+([-.]\w+)*,
    "alertText": "* Pas de Gmail siouplé !"
},
...

Une fois cette règle établie, il ne restera plus qu’à l’appeler dans notre code HTML. Comment ? C’est simple. Nous dirons dans un bon franglais que notre règle est une règle custom. Ça tombe bien ! Le plugin comprend le franglais. Vous écrirez donc:

<input value="" class="validate[custom[nogmail]]" type="text" name="mon_champ" id="mon_champ" />

Et par la magie du code, votre champ sera vérifié selon la regex définie dans la règle.

Mais encore.

Vous l’aurez donc compris. Avec un peu de maîtrise dans les regex, les possibilités de ce plugin sont infinies.

Il s’avère que vous aurez également à votre disposition des règles permettant d’effectuer des vérifications en Ajax. (Utile pour vérifier si le pseudo ou l’adresse mail ne sont pas déjà pris par exemple.)

Je vous laisse un petit lien vers la documentation plus que fournie du plugin.

N’hésitez pas à spécifier dans les commentaires si une fonction en particulier vous intéresse.

A bientôt les amis !

A propos de Romuald

Romuald a écrit 23 articles sur le blog.

Les amis de nos amis sont nos amis, alors partageons !

Laissez un commentaire





Si vous êtes un vrai développeur, vous devez savoir compter.
Alors on vous met au défi !
Si vous réussissez cette épreuve, nous nous ferons une joie de lire votre commentaire.