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 !

Logo jQuery

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.

Posted in Compétences Techniques web and tagged , , , .


65 Comments

  1. Salut !
    je suis en train de faire ton tuto, qui est plutot cool dailleurs.

    je ne suis pas vraiment codeur et certains details me dépasse un peu, comme par exemple où met on l’adresse de reception du formulaire ?

    merci d’avance ++

    Arnaud

  2. What ?

    « Valider ses formulaires coté client (en javascript) cela permet de ne pas utiliser
    les contrôles serveurs et ainsi éviter de le surcharger. »

    O_O alors la, n’importe quoi, verifier du coté client ne doit pas justifier de ne pas contrôler du coté serveur, le client peu très bien t’envoyer ce qu’il veux (désactiver javascript, utilisé greasemonkey etc…)

    • @Damoun…j’attendais une réponse de ce style la.

      le genre de phrase du style « O_O alors la, n’importe quoi » merci d’éviter avec moi. Fait attention à comment du parle aux personnes en général, je pense que ton commentaire à la base est constructif et que tu as voulu bien faire mais la façon dont tu l’exprime donne l’impression que tu me prend de haut alors fais attention…

      En fait ça permet d’éviter de les utiliser ça ne veut pas dire qu’il faut pas les programmer derrière (niveau sécurité faire les verifs au niveau du serveur reste obligatoire bien sur)…mais au moins tant que c’est en javascript ça évite de passer par le serveur pour les validations et donc de le surcharger.

  3. Salut Pierre, tout d’abord merci pour ce petit tuto qui est fort instructif et en français de surcroit. Je t’écris car j’ai un petit souci lorsque j’implémente la méthode :jQuery.extend(jQuery.validator.messages, {.

    Car sans cette méthode, les messages de validation sont en anglais mais lorsque j’utilise cette méthode, plus rien ne s’affiche et je ne comprends pas trop pourquoi.

  4. « tant que c’est en javascript ça évite de passer par le serveur pour les validations »

    S’il y a une validation serveur, le formulaire va passer les deux tests de validation : d’abord en js, puis en php. Il y aura bien une validation serveur en bout de piste.

    Et si tu trouves qu’on te prend de haut… C’est que tu le cherches : exprime un peu mieux tes idées, et on aura moins envie de les contester. Petit branleur.

    • @Stanislas:

      Le « petit branleur » t’emmerde, caché derriere un PC c’est facile d’insulter les gens gratuitement…je t’invite a venir me le dire en face a l’occasion si on a la chance de se croiser sur un salon ou à une conférence.

      je comprend ton commentaire…en fait tu as pas vraiment compris le commentaire précédent ni ma réponse.

      en fait il disait que c’était dangereux pour la sécurité de mettre QUE en javascript les validations sur un ton pas trés sympas mais il a raison sur le fond.

      Ce que j’ai répondu c’est que il faut les programmer mais que ca évite de surcharger le serveur pour rien et j’ai répondu plutôt gentillement.

      Bien sur que si c’est valide les controles php vont quand meme etre appelé mais ca va éviter un paquet d’aller retour pour rien, en cas d’erreur le client devra directement modifier son email par exemple et il aura pas besoin de faire un aller retour serveur pour voir qu’il y a une erreur…donc ca évite de le surcharger. Tu vois ce que je veux dire ?

      Soit un peu respectueux envers les autres. Les articles, je les écrit pour aider les aux développeurs parce que j’aime bien ca, parce que la plupart des commentaires des autres personnes qui suivent le blog me donnent envie de continuer (merci a vous d’ailleurs) et que ca me fait plaisir de voir que j’ai aidé des personnes en écrivant un article.

      Heureusement que tres peu de personnes réagissent comme toi sinon ecrire un blog deviendrais une corvée…c’est vraiment une reaction de merde que tu as et c’est tres insultant.

      visiblement si tu as lu mon article c’est que tu cherchais une réponse a une question et que t’es bien content de tomber sur un article qui traite du sujet.

      si mes articles te plaisent pas personne ne t’oblige à les lire…

      Bonne journée quand même.

  5. cher pierre, ce n’est pas pour troller un peu plus, mais il faudrait vous relire de temps en temps…

    se la jouer pro et donner des conseils c’est facile.
    admettre qu’on fait des erreurs ça l’est moins.

    rester humble n’est pas votre fort, le design de ce site le prouve.. je suis tombé ici par hazard et je reviendrais pas

    Promis et pas la peine de répondre hein
    loool

    • Bonjour,

      je suis tres ouvert au critiques, « se la jouer pro et donner des conseils c’est facile »,  »
      rester humble n’est pas votre fort, le design de ce site le prouve..  » oui c’est vrai sur le site je me met en valeur ca me permet d’obtenir des clients et les recruteurs aprécient aussi visiblement.

      Je montre que je sais faire des choses et même si oui effectivement je me met en avant (apres tout c’est mon blog non ?!), j’aide les autres et c’est bien ca le but du site. Quand j’ai du mal à trouver de la doc compléte (du genre ce tuto) je crée un article pour combler le manque et faire en sorte que d’autres personnes ne perdent pas autant de temps que moi pour trouver une solution. Il n’y a rien de prétentieux la dedans je pense et ca part plutôt d’une bonne volonté.

      Quand j’aide une personne en retour on me laisse un « merci » en commentaire Ca arrive pour une personne sur 100. par contre les critiques arrivent facilement donc oui c’est un peu énervant.

      Maintenant pas de soucis, si tu trouves que j’ai fais une erreur, je t’invite a argumenter et je serai ravis de te répondre. La phrase était mal tourné je dis pas le contraire…maintenant pas besoin d’etre insultant.

      et sincerement mettre « meta http-equiv= »refresh » content= »0;url=javascript:document.vulnerable=true; »> » …tu dois vraiment avoir que ca a faire.

      Pierre.

  6. merci pour ce tuto, il m’as permis de gagner du temps.

    je comprend ce que tu veut dir sur les vérification des formulaires, presque tout les sites font les deux types de vérifications.

    je te comprend tu est un professionnel et tu fait ton site le mieux possible pour attiré le client ce qui est compréhensible. Et tu passe du temps pour les autres je trouve sa bien et tout à ton honneur .

    Continu et ne te laisse pas abattre par des gens qui critique juste pour critiquer.

  7. Bonjour,
    bravo pour le tuto !
    J’ai cependant un souci :
    J’utilise l’éditeur TinyMCE pour les textarea et même si je remplis le champ, j’ai besoin de cliquer 2 fois sur Submit pour envoyer le formulaire. Après la première validation, ça me met le message du « required ».
    En désactivant TinyMCE, ça fonctionne bien !

    Est-ce qu’il y a une solution ?

    Loïc

    • Bonjour Loic, oui j’ai déjà eu le soucis.

      essayes :

      var content = tinyMCE.activeEditor.getContent(); // get the content
          $('#myTextarea').val(content); // put it in the textarea
      

      En fait dans ta méthode submit, il faut que tu fasse le submit de tinyMCE avant ton submit(); normal sinon il ne prend pas en compte ton champs et ca marche pas.

  8. Bon tutoriel, bien pédagogique. Je le trouve adapté au niveau débutant+/intermédiaire.

    Concernant les commentaires négatifs :
    Beaucoup de bloggeurs auraient supprimé les commentaires insultants et sans fondements ci-dessus. Je trouve que tu adoptes une très bonne démarche!

    Concernant ton design il est vrai qu’il te met (assez mais pas trop non plus) en valeur. J’ai envie de dire, et alors!? Je le trouve bien.

    Bonne continuation!

  9. J’ai donné l’id « contenu » à mon textarea et voici le code js :

    $(document).ready(function() {
    $(« #formulaire-nouveau-site »).validate({
    var content = tinyMCE.activeEditor.getContent(); // get the content
    $(‘#contenu’).val(content); // put it in the textarea
    rules: {
    « titre »:{
    « required »: true
    },
    « contenu »:{
    « required »: true
    }
    }
    });
    });

    Mais ça ne me gère plus les oublis !
    Help !

  10. Décidemment,
    je n’y arrive pas !

    $(document).ready(function() {
    $(« #formulaire-nouveau-site »).validate({
    rules: {
    « titre »:{
    « required »: true
    },
    « contenu »:{
    « required »: true
    }
    },
    submitHandler: function(form)
    {
    var content = tinyMCE.activeEditor.getContent(); // get the content
    $(‘#contenu’).val(content); // put it in the textarea
    }
    });
    });

    Je dois toujurs valider 2 fois le textarea ;(

  11. bonjour Pierre,
    je te remercie pour ce tuto, c’est exactement la technologie que je veux utiliser pour valider mon formulaire.

    par contre, je m’excuse mais je n’ai pas très bien compris comment est structuré le code. pour le moment, je me contente d’essayer de reproduire « bêtement » ton exemple et après je l’appliquerai à mon formulaire.

    alors j’ai bien compris que tu découpais ton code dans un souci de pédagogie mais je n’arrive pas à « recoller » les morceaux. par exemple où mettre le submitHandler, quel est le formulaire avec l’identifiant formStep, quelle est la différence entre le jQuery(document).ready et le $(document).ready(function() ? faut-il indiquer les 2 ? et pourquoi le telephone est dans un type= »email » ?

    voilà pour le moment comment j’ai retranscrit ton exemple :

    désolé j’ai du coupé ton message, trop long, pour le copier/coller de code, mettez les entre
     .... 

    ,

    ....

    ,

     .... 

    ,

     ... 

    pour le formater. pour les sources trop longues mettez les sur un serveur distant ca polue les commentaires apres ca deviens illisible.

    désolé ca faisais un moment que j’avais pas validé les commentaires sinon, on est le 16 Septembre 2011 et je le valide que maintenant >< "

  12. petit souci avec mon message ci-dessus , j’ai inséré le code dans les balises </... mais tout le code n'est pas retranscrit...bon j'attends voir si un retour...encore merci :)

  13. Bonjour Pierre,
    Tout d’abord merci pour ce que tu fais et va faire.
    Je suis un peu outré par le comportement de certaines personnes sur cette page. Tu as très bien expliqué les choses. Je partage tes idéaux!
    L’art est difficile et la critique facile (à méditer).

    Grand Merci continue!

    Cyrille

  14. Étant débutant en prog, j’aimerai savoir comment faire une fois le formulaire traité, recupérer une variable genre $valid qui serait à FALSE au départ en TRUE afin de le traiter dans ma page PHP.

    Cordialement

    Cyrille

  15. Bonjour,

    Je trouve votre article bien fait.
    Il y a manifestement un type qui vous en veut et qui se fait passer pour plusieurs personnes pour critiquer.
    Comme le dit un post plus haut; moi je n’aurai pas publié les commentaires désagréables.

    Donc merci pour vos articles.
    Allez ; juste une petite remarque ; mettez une photo avec un petit sourire ;o)

  16. Bonjour Pierre,
    J’ajoute ma voie à celles des autres personnes qui t’on complimenté et je pleins ceux qui t’on attaqué gratuitement.
    Ce ci étant, j’ai un ptit soucis avec les « rules »
    J’ai voulu modifier les messages en fonctions. Tout d’abords j’ai essayé avec le jQuery.extend puis je me suis dis pourquoi ne pas modifier directement dans les « rules » et j’ai fais ça, à titre d’exemple:

    rules: {
    	 "name":{
    		"required": function () {
    			if($("#name").val()=='')
                                    $("#divname").show("speed");
                       },
    	"minlength": 2,
    	"maxlength": 60000
    	 },
    

    qu’est ce que t’en penses ?

  17. Salut,
    Il me semble qu’il manque une chose dans ton tuto:
    Pour mettre en place le plugin, les éléments du formulaire doivent avoir soit la class « Required »pour entrer des valeurs soit la classe « Number » pour des chiffres.

    Je recherche cependant comment styliser en css les messages d’erreurs.
    As tu une idée?

    Merci !

  18. Bonsoir,
    @Grab
    dans ta feuille de style css avec label.error { }.
    /* error message */
    .cmxform label.error {
    height:15px;
    padding:2px 5px;
    margin-left:2px;
    background-color:#FFFE36;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    text-align: left;
    font-size:10px;
    border:1px solid #E1E16D;
    color:#000;
    display:none;
    width:auto;
    display:inline;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;

    -moz-box-shadow:0 0 6px #333;
    -webkit-box-shadow:0 0 6px #333;
    box-shadow:0 0 6px #333;
    }
    .error p {
    margin:0;
    }
    par exemple

  19. Et une question.
    Dans l’index de la demo jquery.validation, le formulaire signupForm possède un champ id= »newsletter » qui au click active 3 champs name= »topic ».
    La vérif se fait dans les rules avec
    topic: {
    required: « #newsletter:checked »,
    minlength: 2
    },
    Ok, c’est clair.
    Maintenant à la validation du formulaire, comment récupérer les valeurs des name= »topic » ?
    Les seules méthode que je connaisse sont de passer par name= »topic[] » pour créer un tableau des posts, et le récupérer à la soumission mais le rule topic[]: « required », ne fonctionne évidement pas, ou de donner un name différent à chacun name= »topic1″, 2.. mais que mettre dans les rules pour vérifier qu’au moins un champ ets coché ?.
    Créer et appeler ne méthode peut-être ?
    Toute suggestion ou explication est la bienvenue.
    Merci d’avance.

  20. Trouvé une solution avec addMethod.
    Si ça peut éviter à quelqu’un d’y passer des heures…
    Dans le formulaire html, modifier les balises name= »topic » en name= »topic[1]« , 2, 3.
    Dans le javascript juste après
    $().ready(function() {
    ajouter la méthode
    $.validator.addMethod(‘atLeastOne’, function(value, element, param) {
    return $(‘input[name^="topic"]‘).is(‘:checked’);
    }, ‘Sélectionnez au moins une option SVP’);
    Dans la partie rules après
    topic: {
    required: « #newsletter:checked »,
    minlength: 2
    },
    ajouter
    ‘topic[1]‘: ‘atLeastOne’,
    ‘topic[2]‘: ‘atLeastOne’,
    ‘topic[3]‘: ‘atLeastOne’,

    Il y a certainement mieux, et je suis preneur, mais ça fonctionne enfin.

  21. Merci pour ceux tutoriel ces nikel pour les débutant(ces pas mon cas et je suis tomber dessus par hasard ) j adore bien expliquer…. et je tient a dire j adore les commentaire…. vous avez tous raison et tous tort de vous emporter si on va par la . je vais vous donner 1 exemple concret qui mettra tous le monde d’accord ça sert a rien d utiliser cela coté public car on peu désactivé javascript et biensur faut contrôler donc on utilise 2 fois les contrôle ces pas top 1 seul contrôle suffit(on est d accord et tous le monde le sais depuis 2005 lol ). Mais imaginons coté admin je possède un site d annonce pro exemple automobile et la mon pro est connecté je lui fait rentré ca plaque d’immatriculation
    et son numéro de série et de la je contrôle grasse a notre ami Pierre FAY ça donne quoi ? je contrôle le champs plaque immatriculation…. en javascript (le noob allstar peut desactiver ca change rien au contraire je t encourage )j envoie le tous vers un autre serveur qui lui contrôle et me renvoie les les informations de mon véhicule et tous ca dynamiquement en 5 seconde lol résultat je rempli directement les champs du formulaire mon pro écrit rien et son véhicule est automatiquement rempli un gain de temps énorme et je parle pas des serveur. Donc avant de dire javascript ça ceux désactive……(de voir des commentaire nul ) dans les langage quand on les connait!!!! et j insiste !!!! on évite ceux genre de commentaire !!!!car si ces bien employé on dit merci a celui qui as écrit le tutoriel par contre quand on est un noob allstar on ramène ça fraise sans rien connaitre et on critique . les plus gros site utilise ces méthodes oups désolé j ai programmer chez barbie je connait pas ces méthodes quand je joué j essayer de ken barbie ……….(le noob à comprit ?)Look la central, paru vendu et encore je te donne des petits site pour pas te faire peur…….. Quand tu sortira 1 de ceux la déja appelle moi je te paye un café ….. Mot finale Merci pierre tu assure continue comme ça…….

  22. Extra tuto, j’aime bien un grand MERCI
    En outre, je suis débutant en jquery/javascript, et malgré ça j’ai commencé à développer une application de Gestion de dépenses pour mon job en php/mysql.
    Dans mes écrans de saisie (form) je doit tout contrôler (chaque champ à part) pour la saisie formatée, comparer des valeurs décimales, contrôler des dates par rapport à d’autres etc… je me suis trouvés avec pas mal de function pour chaque cas surtout le formatage genre 99.9999999 pour un champs de devise ou 999999.999 pour un champs de prix ainsi de suite …
    Ma question est : est-ce que cette méthode de validation peut-elle reformuler tous les contrôles que j’ai développée ?
    Je suis même prêt à fous fournir des exemples de mes codes js (très débutant hélas)..
    meziane

  23. Merci pour le tuto, après test j’ai tout de même quelques soucis.
    Comment controler un select?
    Quand je controle un champ date (avec calendrier en jquery), je dois cliquer deux fois sur une date de mon calendrier avant que l’erreur disparaisse.
    As-tu une ou deux petites idées pour corriger tout ca?
    Je te remercie d’avance.
    Au passage, génial ce petit script c’est le seul que j’ai pu trouvé fonctionnant à l’intérieur d’un overlay.

  24. Bonjour,
    En utilisant cette technique de validation de formulaire, je constate qu’une adresse email est validée après seulement UN caractère après le point du nom de domaine. Ex : plomplom@domaine.g serait validé. Ci-dessous le code qui me semble valider tout ça. Pour moi, c’est un peu du chinois… Pourriez-vous me dire ce que je dois modifier pour ne valider qu’à la suite d’au moins deux caractères ? Merci ! :-)

    email: function(value, element) {
    // contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
    return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value);
    },

  25. Merci, très bien se tutoriel. J’ai trouvé une formule assez simple pour mettre un style :

    errorElement: « div »,
    wrapper: « div », // a wrapper around the error message
    errorPlacement: function(error, element) {
    offset = element.offset();
    error.insertBefore(element)
    error.addClass(‘message’); // add a class to the wrapper
    error.css(‘position’, ‘absolute’);
    error.css(‘left’, offset.left + element.outerWidth());
    error.css(‘top’, offset.top);
    }

    Il suffit ensuite de créer une classe message.

    Vous pouvez trouver ma source à cet endroit : stackoverflow.com/questions/860055/jquery-override-default-validation-error-message-display-css-popup-tooltip-lik

  26. Bonjour,

    Merci pour le tuto.
    J’ai cependant un souci pour le récupérer via php.
    J’ai fait un formulaire avec un bouton type « submit »
    je contrôle mes champs via le plugin tout fonctionne mais le formulaire n’est pas récupéré par php !
    si j’enlève le contrôle par le plugin, php récupère bien le formulaire.
    Faut-il faire une action particulière sur le bouton submit ?

  27. Rooo certains commentaires… Perso je remonterai à la source et mènerai quelques actions contre la connerie ^^

    Tout est perfectible, restez polis surtout là ou on ne vous a rien demandé.

  28. Merci Pierre pour ce partage.
    Je trouve cela hallucinant qu’on puisse venir critiquer ou utiliser ce type de ton envers quelqu’un qui décide d’aider ..
    Bonne continuation !

    • Merci beaucoup Mika :) oui c’est le lot quotidien de beaucoup de bloggeur malheureusement :) mais bon la plupart des commentaires sont positifs en général. Ce genre de personne reste assez rare (heureusement ^^)

  29. Bonjour Pierre,
    J’aime bien ton tuto.
    J’ai une question très banale, comment faire pour récupérer le résultat du Control d’un élément?
    Je m’explique j’aimerais simplement ajouter une class css « error » à l’élément si il y’a eu une erreur, ou « success » si il y’en a pas eu.
    Merci.

  30. Tuto sympathique, merci… et effectivement quelques trollitos sur le web, concernant jquery.validate ça marche très bien avec bootstrap et concernant l’intégration des formulaires ça devient beaucoup plus rapide et reposant.

    bonne journée

  31. Dans le deuxième bloc « document ready ; #id validate »

    Il manque vraisemblablement un petit }); pour fermer .ready

    ps: dommage de ne pas utiliser le validator dans cette page !!!

  32. Bon, je suis tombée vite fait sur ton tuto qui a l’air pas mal. Je me suis aussi amusée à lire les commentaires. Ca m’a toujours soulé les p’tits geeks qui se la pètent grave et qui engueulent les pauvres débutants (ou autres !).

    Tu as bien fait de répondre, ça me démange beaucoup parfois sur les forums de le faire ! (Je sais, ça date maintenant vu la date de mise en ligne des commentaires).

    Juste une petite remarque en passant : sur l’en-tête de ton site c’est marqué « engeneer ». Tu as voulu dire ingénieur ? C’est « engineer » dans ce cas-là, non ?

    Je suis pas très forte en anglais mais je pense bien que c’est ça !

    En tout cas, bonne continuation !

  33. Merci pour ce tuto.

    Est-ce possible d’avoir le même formulaire sur une page et le valider quand même ?
    Je m’explique j’ai un formulaire sur ma page. et le même formulaire appelé (php include) dans une pop up (modal).

    Je ne sais pas si je suis assez clair !

    Merci de votre aide.

  34. Ola ! Tuto très intéressant, je viens de mettre en place ce plugin et il dépote ! Juste prendre garde qu’entre les deux validate, l’id du formulaire d’exemple a changé (#formStep vs #monFormulaire).

    Concernant le débat dans les messages précédents, si je peux me permettre de donner mon avis (après tout ce temps pfiou ….) je ne suis d’accord avec le comportement d’aucun de vous deux héhé; bien sur il faut faire ses vérifs côté serveurs mais il y a une manière plus courtoise de critiquer et la même de savoir recevoir les critiques. Bref ca date, mais je tenais à le dire ! Soyons courtois, sinon je ne vois pas trop l’intérêt de partager ses connaissances à coup d’insulte…

    Continues à faire tes tutos Pierre Fay ! ce n’est pas la première fois que je viens ici d’ailleurs (Magento addict :)) et ton site m’a beaucoup aidé !

  35. it is a good work
    I use it to validate a from in my asp mvc application
    all run good but unfortunatly it denied the action in the server to be run

Laisser un commentaire

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

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>