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.
Le plugin Validate
Les fichiers
<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>
$(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
});
});
$('#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().
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.
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
Version compactée du code du gestionnaire d'événements
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
}
});