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.jsjqueryui/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
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 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>
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
});
});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 :
required : true,
minlength : 1
}
Il est enfin possible d'ajouter ses propres fonctions par la méthode validator.addMethod().
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()
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
}
});