Validation de formulaire

Le plugin Validate

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

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&eacute;nom :</label>
                    <input type="text" align="center" name="Prenom" id="Prenom" />
                <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&eacute;..." 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&eacute;l&eacute;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) || /\b[+ ]?\d{2,3}[- ]+\d{1,2}[- ]+\d{2}[- ]+\d{2}[- ]+\d{2}\b/i.test(value);
        }, "le n° est sous la forme xx-xx-xx-xx-xx ou +ind-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      
    });

Cliquez ici pour afficher ces fichiers dans une fenêtre surgissante

Le code HTML

L'appel au plugin est réalisé par l'application de la fonction "validate" sur le formulaire ( identifié ici "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 :
$("#IdForm").tooltip({...})

Le script

validator.addMethod ajoute le traitement de la règle " monNumero" aux méthodes par défaut du plugin.

elle se base sur l'analyse de l'expression régulière

qui compare la saisie de l'utilisateur aux formes xx-xx-xx-xx-xx, ind-xx-xx-xx-xx, xx xx xx xx xx et +ind< xx xx xx xx

L'image  est utilisée pour palier au bug d'affichage des expressions contenant des crochets "/\b[+ ]?\d{2,3}[- ]+\d{2}[- ]+\d{2}[- ]+\d{2}[- ]+\d{2}\b/"

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()

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
            }
 });
         

Mots Clé