jQuery - 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

Accès à la documentation ( et plus...)  complète sur ce plugin

 

Les fichiers

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

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ègles "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 expression contenant des crochets "/\b[+ ]?\d{2,3}[- ]+\d{2}[- ]+\d{2}[- ]+\d{2}[- ]+\d{2}\b/"

ICI un outil pour  tester les expressions régulières

validator.addMethod ajoute le traitement de la règles "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 expression contenant des crochets "/\b[+ ]?\d{2,3}[- ]+\d{2}[- ]+\d{2}[- ]+\d{2}[- ]+\d{2}\b/"

ICI un outil pour  tester les expressions régulières

Utilisation des événements click  ou/et keypress en Javascript si l'on n'utilise pas le plugin :

La portion de code ci-contre 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 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

    $('#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
            }
        });
    $('#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      
    });

Mots Clé