jQuery plugin Validation : une nouvelle méthode pour contrôler vos formulaires !

Je souhaite au travers de ce tutoriel vous présenter l’excellent plugin de validation de formulaire créé par bassistance.de. Je vous propose également de réaliser votre propre méthode qui viendra se greffer au plugin. Que du bonheur !

Niveau : intermédiaire
Langages utilisés : HTML et Jquery

Prérequis

~~6 œufs~~
Première étape obligée, le téléchargement de la bibliothèque Jquery !
Rien de plus simple, il vous suffit de cliquer sur ce lien. Cliquez sur le bouton Download et copiez l’ensemble du texte dans un fichier que vous appellerez par exemple jquery.js. Ne modifiez surtout pas cette bibliothèque nous l’utiliserons pour la suite du tutoriel :)
Si ce n’est pas déjà fait, je vous propose de télécharger le plugin à cette adresse : bassistance.de. Nous allons créer un répertoire dans lequel nous copieront notre plugin Jquery.
Préparez un fichier qu’on appellera sobrement index.html qui se chargera d’afficher notre page !
Enfin, créez un fichier intitulé script.js. Celui-ci nous permettra d’utiliser notre plugin.

Quelques conseils avant de commencer…

Je vous conseille dès maintenant de bien organiser votre arborescence de fichiers et dossiers. Pourquoi ? Pour le gain de temps et la meilleure lisibilité de votre projet.
Dans notre cas, on aurait quelque chose dans ce style là :

Tuto
- index.html
- librairies
  - jquery.js
  - jquery.validate (le dossier qui contient le plugin)
- scripts
  - script.js

C’est parti !

Je vous donne d’entrée le look de notre fichier HTML, je ne reviendrai volontairement pas sur sa structure car je suppose que vous êtes familiés avec ce langage, non ?
N’hésitez pas à poster des commentaires si quelque chose vous échappe. Voici le code en question :

<html>
<head>
<title>Un Tuto qui envoie du lourd !</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22librairies%2Fjquery.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
	  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22librairies%2Fjquery.validate%2Fdist%2Fjquery.validate.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
	  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22librairies%2Fjquery.validate%2Fdist%2Fadditional-methods.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
	  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22scripts%2Fscript.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</head>
<body>

<form id="votre_form" method="POST" action="">
	  <input type="text" name="control" class="required"/>
	  <input type="submit" name="submit" value="Envoyer"/>
</form>

</body>
</html

Veillez à bien vérifier les chemins vers vos fichiers sinon ça ne fonctionnera pas !
A priori, si vous avez suivi mes recommandations concernant l’arborescence du tutoriel, vous n’aurez pas ce problème =)

Le script JQuery !

Ce script initialise le contrôle du formulaire. Je vous renvoie vers la documentation du plugin si vous souhaitez creuser un peu plus les différentes méthodes qu’il propose !
Le fichier script.js en question :

$(document).ready(function(){
	  $("#votre_form").validate();
});

Oui vous ne rêvez pas, une seule ligne est nécessaire pour activer le contrôle sur notre formulaire.
Vous remarquez également que « votre_form » doit correspondre à l’ID de votre formulaire.
Si vous avez bien suivi les étapes précédentes, vous pouvez tout à fait lancer dans votre navigateur favori le fichier index.html !
Ne saisissez rien dans le champs texte et cliquez sur le bouton « Envoyer » : un joli message d’erreur en anglais devrait s’afficher.
Je vous donne tout de même un .zip si ça ne marche pas chez vous. Attention cependant, ce .zip ne comporte pas les étapes qui vont suivre alors accrochez vous !

I speak French very well !

Vous souhaitez sans doute implémenter ce plugin sur un site 100% français. Rien de plus simple car vous n’aurez qu’à inclure le fichier messages_fr.js dans votre fichier html. Celui-ci se trouve dans le dossier localization. Encore une fois faites attention aux chemins vers vos différents fichiers :p
You’re done ! Les messages d’erreur s’affichent maintenant en français !

Entrons dans le vif du sujet

Contrôler la présence ou non de contenu dans un champs texte c’est bien mais j’en veux plus. Pas de soucis.
Nous allons dans cette partie du tutoriel apprendre à créer des règles de contrôle. Pour ce faire, la documentation de bassistance.de nous recommande d’utiliser la méthode $.validator.addClassRules.
Dans notre fichier script.js, nous allons saisir ces quelques lignes avant l’initialisation du plugin. Le fichier script.js ressemblera donc à ça :

$(document).ready(function(){
	// Ajout de notre méthode
	$.validator.addClassRules({
		checkinput:{
			required: true
		}
	});
	// Initialisation du plugin
	$("#votre_form").validate();
});

« checkinput » correspond en fait à la classe required qu’on avait précédemment attribué à l’input.
Vous pouvez très bien remplacer required par checkinput et vous devriez obtenir le même résultat qu’auparavant :)
L’avantage ? On va pouvoir attribuer à un seul et même champs autant de méthodes de validation qu’on le souhaite. Par exemple :

$.validator.addClassRules({
	checkinput:{
		required: true,
		digits: true,
		minlength: 5,
		maxlength: 5
	}
});

L’exemple précédent oblige à remplir le champs, à ne saisir que des chiffres et ne compter que 5 caractères en tout et pour tout. On pourrait très bien imaginer une validation d’un code postal :)
L’autre avantage de cette de la classe addClassRules ? On peut facilement créer à la volée différentes méthodes de validation. Un autre exemple :

$.validator.addClassRules({
	checkinput:{
		required: true,
		digits: true,
		minlength: 5,
		maxlength: 5
	},
	checkemail:{
		required: true,
		email: true
	}
});

Je vous laisse jouer avec les différents types de contrôles de la bibliothèque. Les énumérer ici un à un n’a pour moi aucun intérêt particulier.

Ma première méthode !

On va s’intéresser dans cette partie à l’input type=’FILE’. Sachez tout d’abord qu’une propriété du plugin permet de n’accepter qu’un certain type de fichier.
Pratique si l’on souhaite autoriser uniquement des PDF ! Il s’agit de la méthode accept et son emploi vous est présenté ici. Elle prend en fait comme arguments l’extension du ou des fichier(s) qu’on souhaite autoriser.

Alors c’est bien beau tout ça mais si je souhaite imposer une taille maximale à ne pas dépasser lors de l’upload d’un document, je fais comment ?
Certains répondront d’ajouter simplement l’input suivant dans le formulaire :

<input type="hidden" name="MAX_FILE_SIZE" value="{Poids_en_octets}" />

Certes, mais le but est de prévenir l’utilisateur que son document est trop lourd avant l’envoi du formulaire et c’est là toute la différence :)
Résultat, les ressources serveur sont épargnées et l’expérience utilisateur n’en est que meilleure (le message d’erreur apparait instantanément ce qui ne sera pas le cas d’un rechargement de page).
Nous allons nous intéresser de plus près au fichier additionnal-methods.js présent dans le répertoire dist du plugin.
Comme son nom l’indique, ce fichier contient de nouvelles méthodes qui ont été développées en étendant les fonctionnalités déjà bien complètes qu’offre le plugin. Pour créer notre méthode, nous allons donc utiliser la méthode jQuery.validator.addMethod. Voici en bonus un exemple commenté de l’utilisation de cette fonction :

// Le premier argument de la fonction est le nom de la méthode, ici lettersonly.
// Nous retrouvons juste après une fonction qui sera chargée d'effectuer divers contrôles sur l'element et sa valeur !
// Le dernier argument permet de définir le message d'erreur à afficher.
// "/^[a-z]+$/i" est une expression régulière au format certes un peu indigeste mais puissant 
// Cette fonction permet de contrôler qu'un input ne contient que des lettres, facile !
jQuery.validator.addMethod("lettersonly", function(value, element) {
	return this.optional(element) || /^[a-z]+$/i.test(value);
}, "Letters only please");

Let’s go !

Maintenant que vous êtes carrément incollables sur ce plugin, on va créer une méthode permettant de contrôler la taille maximale qu’un internaute pourra uploader dans un input file. Vous pourrez la chercher autant que vous voulez dans le plugin, elle n’existe malheureusement pas, alors créons la !

// La fonction est à ajouter dans le fichier additionnal-methods.js
jQuery.validator.addMethod("maxfilesize", function(value, element, params) {
	var elementsize;
	try{
		elementsize = element.files[0].size;
	}catch(e){
		var browserInfo = navigator.userAgent.toLowerCase();
		if(browserInfo.indexOf("msie") > -1){
			var fso = new ActiveXObject("Scripting.FileSystemObject");
			elementsize = fso.getFile(element.value).size;
		}else{
			return true;
		}
	}
	var size = params[0], typesize = params[1];
	if( typesize == "Ko" ){
		size *= 1024;
	}else if(typesize == "Mo"){
		size *= 1024 * 1024;
	}else if(typesize == "Go"){
		size *= 1024 * 1024 * 1024;
	}
return this.optional(element) || elementsize < size;
}, jQuery.validator.format("The max file size of {0}{1} is reached"));

//Edit : merci à @touftq pour ses retours concernant un bug rencontré sous IE !

Analysons de plus près cette fonction :

Vous remarquez un troisième argument dans la fonction. params va nous permettre de récupérer un tableau de paramètres qui contiendra la taille du fichier et son unité (Ko, Mo Go ?).
La variable elementsize récupère la taille en octets du fichier que l’internaute souhaite uploader
La variable size quant à elle est automatiquement convertie en octets selon l’unité que vous aurez choisi dans le fichier script.js.
Enfin, on compare ces 2 valeurs et cela nous permet de déterminer si la limite imposée est atteinte ou non !
Vous avez certainement remarqué {0}{1} dans le message d’erreur. Ces deux chiffres seront dynamiquement remplacés par les 2 paramètres qu’on enverra dans la fonction :)

Voici un exemple simple d’utilisation de cette nouvelle méthode :
Remplacez les input text dans le formulaire du fichier index.html par un input FILE et appliquez lui la classe checkinput.
Dans script.js, vous n’aurez qu’à utiliser la règle suivante par exemple :

$.validator.addClassRules({
	checkinput:{
		required: true,
            // Ici, on limite la taille maxi à 3 Mo. On peut aussi utiliser des Ko ou même des Go. 
            // Modifiez les arguments selon vos besoins !
		maxfilesize: [3, "Mo"]
	}
});

En VF c’est mieux

Pour les puristes qui veulent afficher leur message d’erreur en français, vous devrez éditer le fichier de langue messages_fr.js situé dans le dossier localization. Souvenez-vous, on l’avait inclus en début de tutoriel :)
Ajoutons y tout en bas (attention aux virgules !) la traduction du message d’erreur de la fonction qu’on a créé qui s’appelle maxfilesize

maxfilesize: jQuery.validator.format("La taille maximale de {0}{1} est atteinte")

On retrouve les arguments {0}{1} qu’il ne faut surtout pas retirer ! Ils seront remplacés par les arguments que vous définirez dans votre script. De plus, veillez à faire coïncider les noms des fonctions dans le fichier de traduction avec les noms que vous attribuez à vos méthodes. Si ce n’est pas le cas, rien ne se passera !

Attention…

Ce plugin Jquery ne saurait se passer de contrôles PHP lors de la soumission du formulaire.
En effet, les petits malins qui ne veulent pas se soumettre à vos limitations essaieront de désactiver leur Javascript. Si ce contrôle n’est pas mis en place côté serveur, vous n’aurez aucune garantie que votre règle est bien définie.
Quelques pistes :

- Utiliser la balise html noscript qui est interprétée seulement si l’internaute a désactivé Javascript. Vous pourrez alors vous servir de la balise meta refresh pour le rediriger vers la page de votre choix. Je vous déconseille cependant d’utiliser cette méthode car l’internaute peut désactiver son Javascript après être arrivé sur votre page !
- La solution la plus fiable reste la solution PHP. Après validation du formulaire, le script refera les contrôles sur la taille du fichier, son type… C’est aussi valable avec les champs textes et autres.

Pourquoi ne pas développer ces pistes dans un prochain tutoriel ?

Conclusion

Ouf ça y est ! Vous connaissez maintenant parfaitement le plugin de validation, du moins je l’espère sinon revenez à la case départ ^^
Voilà le topo : vous savez créer des méthodes de validation, en attribuer à des input de n’importe quels types, utiliser les fichiers de traduction et j’en passe.
N’hésitez pas à me suivre sur Twitter pour être tenu au courant de mes prochains tutoriaux : @Super_Guillaume.
Laissez libre court à votre imagination et n’oubliez jamais, « Write less, do more » ! :)

Summary

Article Name

jQuery plugin Validation : une nouvelle méthode pour contrôler vos formulaires !

Description

Je souhaite au travers de ce tutoriel vous présenter l'excellent plugin de validation de formulaire créé par bassistance.de. Je vous propose également de réaliser votre propre méthode qui viendra se greffer au plugin. Que du bonheur !

Nicolas AUNE

Guillaume Roques

Nicolas AUNE

PUShAUNE

Tu kiffes ? Alors partage avec tes potes !

5 commentaires

Le 22 octobre 2016 à 09:13, Parrochia a dit :

C’est dommage qu’il n’y ait pas de lien de demo.

Répondre
Le 27 mai 2016 à 11:46, genco a dit :

Bonjour,

débutant en programmation, j’ai réussi a utiliser ce tuto (très bien fait).

en revanche, j’ai juste une question :
lorsque je tente de tester la validation d’un input type « email », il suffit de mettre « xxx@yyy » dans l’input pour cela soit interpréter comme un email valide. cependant, il manque le « .qqch » à la fin…

comment pourrait-on faire pour compléter la validation de checkemail ?

en tout cas merci encore pour ce tutoriel

G.

Répondre
Le 23 mars 2015 à 10:36, Laurent a dit :

Bonjour,

Tout d’abord ce plugin est génial.
Je suis en train de bloquer à un endroit. Enfait, j’aimerais uploader un fichier mais d’abord vérifier si l’utilisateur dispose encore d’assez de place (chaque utilisateur dispose de 5Mb max).
J’ai essayé avec la methode remote: upload.php mais le script ne fonctionne plus.

Merci pour votre aide.

Bàv,

Répondre
Le 13 février 2013 à 14:48, touftq a dit :

Bonjour,
element.files est une api html5, pas de prise en charge sur ie :x.
Voici mon script pour résoudre ce souci a l’aide d’un activex.

jQuery.validator.addMethod(« maxfilesize », function(value, element, params) {
var elementsize;
try{
elementsize = element.files[0].size;
}catch(e){
var browserInfo = navigator.userAgent.toLowerCase();
if(browserInfo.indexOf(« msie ») > -1){
var fso = new ActiveXObject(« Scripting.FileSystemObject »);
elementsize = fso.getFile(element.value).size;
}else{
return true;
}
}

var size = params[0], typesize = params[1];
if( typesize == « Ko » ){
size *= 1024;
}else if(typesize == « Mo »){
size *= 1024 * 1024;
}else if(typesize == « Go »){
size *= 1024 * 1024 * 1024;
}
return this.optional(element) || elementsize < size;
}, jQuery.validator.format("The max file size of {0}{1} is reached"));

Répondre
- Le 13 février 2013 à 15:24, Guillaume a dit :
  
  Effectivement, merci beaucoup pour ce correctif :)
  Le tuto est mis à jour !
  
  Répondre

Répondre à genco Annuler la réponse

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.