JQUERY Un plugin génial de validation de formulaire

Bonjour !
Aujourd'hui petit tutoriel sur un plugin de validation de formulaire. Fini la galère des formulaires validés tant bien que mal. Ici on fait ca très facilement et en un temps record.

Voici le résultat qu'on obtient a la fin :   

Validation du formulaire

Etape 1 : Tout d'abord, il faut télécharger les fichiers. Il vous faut la dernière version de JQuery, le plugin en question, les feuilles CSS relatives et un petit exemple pour vous aider si jamais vous êtes perdus :

Ficher d'exemple

Regardez dans l'archive (.zip), on retrouve ces élements.

Etape 2 : Ajoutez ces lignes entre vos balises  HEAD

<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.js" type="text/javascript"></script>

<script src="js/jquery.validationEngine.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine-fr.js" type="text/javascript"></script>

 Le fichier jquery.validationEngine-fr.js est une extension pour les personnes utilisant un navigateur parametré en francais. Les autres auront le plugin normal, en anglais. Vous pouvez cependant le parametrer comme bon vous semble.

Etape 3 : Une fois les librairies et le JQuery inclus, il faut maintenant appeler la fonction de validation du formulaire sur le formulaire que vous voulez valider.

$(document).ready(function() {

    $("#formID").validationEngine({

        success :  false,

        failure : function() { callFailFunction()  }

    })

})

Vous l'aurez compris, vous pouvez utiliser une classe ou un id, ici c'est le cas ou votre formulaire possède l'attribut id="formID"
Vous devez mettre ce code entre des balises <script type="text/javascript"></script> ou alors dans un fichier *.js et inclus dans cette même balise avec l'attribut src="monfichier.js"

Dernière Etape, 5 :
I ne reste plus qu'a associer à chaque champ que l'on veut valider une classe spécifique. Par exemple, pour un champ obligatoire qui ne doit comporter que des lettres et qui ne doit pas dépasser 100 caractères :

<input class="validate[required,custom[onlyLetter],length[0,100]]" name="firstname" type="text" />

 Et voilà, maintenant, vous pouvez utiliser ces arguments pour la validation de vos champs :

optional: Special: Only validate when the field is not empty *Please call optional first
required: Field is required
length[0,100] : Between x and x characters allowed
maxCheckbox[7] : Set the maximum checkbox autorized for a group
minCheckbox[7] : Set the minimum checkbox autorized for a group
confirm[fieldID] : Match the other field (ie:confirm password)
telephone : Match telephone regEx rule.
email : Match email regEx rule.
onlyNumber : Numbers only
noSpecialCaracters : No special characters allowed
onlyLetter : Letters only
date : Invalid date, must be in YYYY-MM-DD format