La validation des formulaires avec jQuery Validate

Vous voulez faire la vérification de vos formulaire en javascript simplement et rapidement ? Vous avez besoin d’une librairie qui va vous permettre de pouvoir vérifier qu’un champ est bien un email, une carte de crédit, une adresse ou encore un code postal etc… ? Vous voulez placer vos messages d’erreurs où et comme vous voulez ? Alors cet article va vous aider !

Dans cet article, nous allons voir comment mettre en place un système de validation de vos formulaires en javascript grâce au plugin « jquery validate ».

Vous pouvez consulter la documentation du plugin sur le site officiel de jquery à l’adresse suivante : http://docs.jquery.com/Plugins/Validation

Pourquoi utiliser cette méthode ?
- Valider ses formulaires coté client (en javascript) cela permet de ne pas utiliser les contrôles serveurs (EDITION POUR EVITER TOUT MELENTENDU : ATTENTION ILS DOIVENT QUAND MÊME ÊTRE PRÉSENT AU CAS OU ON DÉSACTIVE LE JAVASCRIPT) et ainsi éviter de le surcharger (si vous avez 100 utilisateurs ca fera 100 recettes en moins...C'est toujours ça de moins de charge serveur. mais j'insiste implémentez les au cas ou)
- Jquery Validate c’est simple et rapide.
- Avec cette méthode, vous pouvez faire tout ce que vous voulez

Bref, toute façon vous êtes entrain de lire cet article et si vous allez jusqu’au bout vous serez convaincu donc pas besoin de trop justifier mon choix, vous verrez par vous même ;)

Premièrement, ajouter les fichiers…
Commencez par ajouter jQuery (la librairie de base qu’on utilise) et le plugin jQuery validate dans votre page. Vous pouvez les trouver à l’adresse suivante :
- jQuery :
http://docs.jquery.com/Downloading_jQuery
prenez le fichier jquery-xxxx.min.js
(xxx représente la dernière version - actuellement 1.5.1- )

- jQuery validate :
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
prenez le fichier jquery.validate.min.js

Et insérez les dans votre page les javascript :

<script type="text/javascript" src="jquery-xxxx.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>

Deuxièmement, Comment ça marche ?
Imaginons que notre formulaire à l'id suivant : monFormulaire

<form id="monFormulaire" method="post" action="#">
   <textarea id="mon_textarea" name="montextarea"></textarea>
   <input type="email" id="mon_email" name="monemail" />
   <input type="email" id="mon_telephone" name="montelephone" />
   <input type="submit" value="ok" id="btn_submit" />
</form>

Pour valider un formulaire on utilise la méthode validate sur le formulaire :

<script>
   $(document).ready(function(){
      $("#monFormulaire").validate();
    });
</script>

afin de définir les règles, on va utiliser une syntaxe simple :

jQuery(document).ready(function() {
   jQuery("#formStep").validate({
      rules: {
         "montextarea":{
            "required": true,
            "minlength": 2,
            "maxlength": 60000
         },
         "monemail": {
            "email": true,
            "maxlength": 255
         },
         "montelephone": {
            "required": true
         }
  })
});

Petit truc 1: Redéfinir les messages d’erreurs
ici c'est très facile pour redéfinir une méthode, on fait ça :

  jQuery.extend(jQuery.validator.messages, {
    required: "votre message",
    remote: "votre message",
    email: "votre message",
    url: "votre message",
    date: "votre message",
    dateISO: "votre message",
    number: "votre message",
    digits: "votre message",
    creditcard: "votre message",
    equalTo: "votre message",
    accept: "votre message",
    maxlength: jQuery.validator.format("votre message {0} caractéres."),
    minlength: jQuery.validator.format("votre message {0} caractéres."),
    rangelength: jQuery.validator.format("votre message  entre {0} et {1} caractéres."),
    range: jQuery.validator.format("votre message  entre {0} et {1}."),
    max: jQuery.validator.format("votre message  inférieur ou égal à {0}."),
    min: jQuery.validator.format("votre message  supérieur ou égal à {0}.")
  });
  

Petit truc 2: Ajouter une méthode - Expression Régulière (Regex)
Ici on utilise la méthode addMethod du validateur puis, on vérifie l'expression régulière

jQuery.validator.addMethod(
  "regex",
   function(value, element, regexp) {
       if (regexp.constructor != RegExp)
          regexp = new RegExp(regexp);
       else if (regexp.global)
          regexp.lastIndex = 0;
          return this.optional(element) || regexp.test(value);
   },"erreur expression reguliere"
);

pour les utiliser, rien de plus simple, il suffit d'ajouter la règle "regex" comme tout les autres attributs

"montelephone": {
    "required": true,
    "regex": /^(\+33\.|0)[0-9]{9}$/
}

Petit truc 3: Modifier un comportement
Imaginons que vous vouliez effectuer une action lors du submit, par exemple cacher le bouton submit lorsque l'utilisateur a réussi a envoyer des informations valides et que le formulaire validé est envoyé.

rules:{
    ...
},
submitHandler: function(form)
{
    /* CACHER LE BOUTON */
    jQuery("#btn_submit").hide();
}

de la même façon vous pouvez redéfinir d'autres actions (voir la doc, et google est votre ami !) quand le formulaire est invalide ( invalidHandler: function(form, validator){} ) ou quand on affiche une erreur (errorPlacement: function(error, element){} - très pratique pour redéfinir le placement du message d'erreur)
PS: il est aussi possible de définir les messages et les règles de validations d'autres façon mais pour moi celle ci est la meilleure car tout est concentré sur quelques lignes javascript et vous n'avez pas a ouvrir 40 000fichiers pour pouvoir modifier ces comportements.
Et voilà, on arrive a la fin de cet article, j'espère que vous avez aimé et que cela vous sera utile. N'hésitez pas à mettre vos commentaires.