Aller au contenu principal


Validation de formulaire

Ce plugin peut être utilisé à partir des CDN habituels . Ci-dessous vous lirez les bibliothèques que j'utilise depuis cdnjs.com (https://cdnjs.cloudflare.com/ajax/libs/) :

   jquery/3.4.1/jquery.min.js  ;
   jqueryui/1.12.1/jquery-ui.min.js ;
   jquery-validate/1.19.1/jquery.validate.min.js ;
   jquery-validate/1.19.1/additional-methods.min.js ;
   jquery-validate/1.19.1/localization/messages_fr.js.

Billet créé le :
18 nov 2020

Les fichiers

Cliquez sur le bouton pour copier le code 
dans le presse papier
    
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <title>Jquery Validation de formulaire </title>
       <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet">
       <link href="style.css" rel="stylesheet">
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/additional-methods.min.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/localization/messages_fr.js"></script>
       <script src="index.js"></script>
   </head>
   <body>
       <div class="wrap">
           <form id="IdForm" name="form" action="" method="POST">
               <div class ="critere">
                   <label for="Nom"> Nom :</label>
                   <input type="text" align="center" name="Nom" id="Nom" />
               </div>
               <div class="critere">
                   <label for="Prenom"> Prénom :</label>
                   <input type="text" align="center" name="Prenom" id="Prenom" />
               </div>
               <div class="critere">
                   <label for="Sexe"> Sexe :</label>
                   <div class="radioNote">
                       <label for="sexe1">M</label>
                       <input type="radio" id="Sexe1" name="Sexe" value="M" checked />
                       <label for="sexe2">F</label>
                       <input type="radio" id="Sexe2" name="Sexe" value="F" />
                   </div>
               </div>
                   <div class="critere">
                   <label for="Adresse">Adresse : </label>
                   <input id="Adresse" name="Adresse" type="text" value="" placeholder="Votre adresse...c'est obligé..." size="60" maxlength="60"/>
               </div>
               <div class="critere">
                   <label> </label>
                   <div>
                       <input id="CP" name="CP" type="text" value="" placeholder="Code Postal" size="6" maxlength="6"/>
                       <input id="Ville" name="Ville" type="text" value="" placeholder="Ville ..."size="40" maxlength="40"/>
                   </div>
               </div>
               <div class="critere">
                   <label for="Tel">Téléphone :</label>
                   <input type="text" id="Tel" name="Tel" placeholder="...A saisir sous la forme XX-XX..." value="" size="36">
               </div>
               <div class="critere">
                   <label for="Mail">E-Mail :</label>
                   <input id="Mail" name="Mail" type="text" value="" placeholder ="...votre email ..." size="70" maxlength="70" >
               </div>
               <div class="critere">
                   <input id="buttonOK" type="submit" value="Envoi" class="btn" >
               </div>
           </form>
       </div>
   </body>
</html>
Cliquez sur le bouton pour copier le code 
dans le presse papier
 $(function(){
   //le plugin jquery-validate
   $.validator.addMethod("monFormatTel", function(value, element) {
       return this.optional(element) || /(0|\+33)[1-9](-\d{2}){4}/.test(value);
       }, "le n° est sous la forme xx-xx-xx-xx-xx ou +33-xx-xx-xx-xx");   
   /* $.validator.addMethod("monFormatMail", function(value, element) {
       // allow any non-whitespace characters as the host part
       return this.optional( element ) || /[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@(?:\S{1,63})+\x2E(?:\S{2,63})$/.test( value );
       }, 'la syntaxe du courriel n est pas valide .');
   */
   $.validator.setDefaults({
       submitHandler: function(form) {
           //le traitement des donnees du formaulaire
           console.log('formulaire valide et pret au traitement: ' )
       },
       rules: {
           Nom: {
               required: true,
               minlength :1
           },
           Prenom: {
               required: true,
               minlength :1
           },
           Adresse: {
               required: true
           },
           Ville: {
               required: true,
               minlength :1,
           },
           CP: {
               required: true,
               digits: true,
               rangelength :[5,5]
           },
           Tel: {
               required: true,
               monFormatTel: true,
               //digits: true,
               minlength :10
           },
           Mail: {
               required: true,
               email :true,
               //monFormatMail: true,
               //digits: true,
               minlength :5
           }
       },
       messages: {
           Nom: {
               required: 'Votre nom SVP, en Majuscule'
           },
           Prenom: {
               required: 'Votre prenom ...'
           },
           Adresse: {
               required: 'Votre adresse svp ...'
           },
           CP: {
               required: 'Le Code Postal est a 5 chiffres...'
           },
           Tel: {
               required: 'Votre numero de telephone svp'
           }
       },
       showErrors: function(map, list) {
           // there's probably a way to simplify this
           var focussed = document.activeElement;
           if (focussed && $(focussed).is("input, textarea")) {
               $(this.currentForm).tooltip("close", {
                   currentTarget: focussed
               }, true)
           }
           this.currentElements.removeAttr("title").removeClass("ui-state-highlight");
           $.each(list, function(index, error) {
               $(error.element).attr("title", error.message).addClass("ui-state-highlight");
           });
           if (focussed && $(focussed).is("input, textarea")) {
               $(this.currentForm).tooltip("open", {
                   target: focussed
               });
           }
       }
   });
   //fin du plugin jQuery-validate
$("#IdForm").validate();
$("#IdForm").tooltip({
       show: false,
       hide: false
   });
});
Cliquez sur le bouton pour copier le code 
dans le presse papier
   
 $('#tfText').on('keypress', function(e){
   if( e.which == 13 ){
       // récupération des données
       var leTexte = $('#tfText').val();
       // traitement
       $.listeTest('selectClasse',leTexte);
       return false; //empêche la remontée de l'action sur tous les parents
   }
});   
$('#btnSubmit').on('click', function(e) {
   // récupération des données
   var leTexte = $('#tfText').val();
   // traitement
   $.listeTest('selectClasse',leTexte);
   return false; //empêche la remontée de l'action sur tous les parents
});

 

Le code HTML

L'appel au plugin est réalisé par l'application de la fonction "validate" sur le formulaire (identifié dans le code présenté par "IdForm") comme l'indique la portion de code ci après :

$("#IdForm").validate( );

Le plugin s'occupe de la gestion des événements (click, keypress ...) dans la méthode validator.setDefaults() du plugin.
La section submitHandler: function( form) {} permet de définir le traitement des données du formulaire lorsque celui-ci est valide. Dans le script fourni ci-dessous, je me contente d'afficher un message dans la console.

Il offre également des règles de validation de données que l'on peut compléter selon nos besoins dans la section rules : de la méthode validator.setDefaults().
Par exemple :

Nom: {
       required : true,
       minlength : 1
}

Il est enfin possible d'ajouter ses propres fonctions par la méthode validator.addMethod().

information complémentaire disponible en cliquant ici

Notez l'application des tooltips de la bibliothèque jQuery-ui sur le formulaire par le code :

$("#IdForm").tooltip({...})

Le script

"validator.addMethod" ajoute, aux méthodes par défaut du plugin "validate", la méthode "monFormatTel" permettant le traitement de la saisie des données du champ "téléphone" du formulaire selon la règle "Tel".

Elle se base sur l'expression régulière :

(0|\+33)[1-9](-\d{2}){4}

qui permet de comparer la saisie de l'utilisateur aux formes 0x-xx-xx-xx-xx et +33x-xx-xx-xx-xx

En effet, cette expression régulière se compose :

  •  du groupe (0|\+33) qui veut que l'expression analysée commence par le caractère 0 ou par la suite +33 ;

  • d'un chiffre compris entre 1 et 9 (indiqué par [1-9]) ;

  • de 4 répétitions du groupe (-\d{2}). Ce groupe correspond à un tiret suivi de 2 répétitions d'un chiffre compris entre 0 et 9. En effet le nombre de répétitions figurent entre les accolades et concerne le groupe qui précède ces accolades.

 

Note : L'expression (0|\+33)[1-9](-\d{2}){4} est une écriture condensée de (0|\+33)[1-9](-[0-9]{2}){4} car l'ensemble \d est équivalent à [0-9].

Gestion des événements

Si l'on n'utilise pas le plugin, la gestion en Javascript des événements click ou/et keypress se réalise grâce à du code semblable à celui de  l'onglet "gestion des événements" présenté ci-dessus.

Il montre l'emploi du gestionnaire "on" sur les événements "click" et "keypress" provoqué lorsque l'utilisateur clique sur le bouton "envoi" d'identifiant "btnSubmit"   ou appuie sur la touche "entrée" dans le champ de saisie d'identifiant  "tfText" du formulaire.

Le handler (gestionnaire) récupère les données du formulaire : ici la donnée saisie dans le champ tfText par le code $('#tfText').val(); puis appelle la fonction de traitement : ici $.listeTest()

Version compactée du code

information complémentaire disponible en cliquant iciVersion compactée du code du gestionnaire d'événements

Cliquez sur le bouton pour copier le code
dans le presse papier
    
 $('#btnSubmit').on('click', function(e) {
        var leTexte = $('#tfText').val();
        $.listeTest('selectClasse',leTexte);
        return false; //empêche la remontée de l'action sur tous les parents
 }).bind('keypress', function (e){
        if(e.which == 13){
            var leTexte = $('#tfText').val();
            $.listeTest('selectClasse',leTexte);
            //console.log("Vous avez appuyé sur la touche entrée.");
            return false; //empêche la remontée de l'action sur tous les parents
            }
 });