Vous êtes sur la page Blog

Vérifier et valider les champs d'un formulaire avec JQuery et le plugin Validate

Rédigé par fab1 aucun commentaire

Il est possible depuis longtemps de vérifier et valider que les informations renseignées dans un formulaire HTML sont au bon format à l'aide de JavaScript, ce qui évite d'envoyer un formulaire pour rien au serveur. Cela évite des aller-retour sur votre serveur car il n'est pas possible pour l'internaute de soumettre un formulaire qui n'est rempli avec des informations correcte.

Bien évidemment, il serait malgré tout impensable de se passer de la vérification coté serveur car il est possible de désactiver le JavaScript dans votre navigateur préféré et surtout de trafiquer les informations envoyées à l'aide de Greasemonkey pour ne citer que lui. D'ailleurs, n'oubliez pas d'aller faire un tour sur les tutoriels concernant l'utilisation des expressions régulières, qui permettent un filtrage très fin et un contrôle précis en PHP des informations envoyées dans le formulaire.

La partie vérification du formulaire JavaScript est donc uniquement là pour valider les informations d'un internaute lambda, si notre script JavaScript trouve des erreurs de saisies dans un formulaire, pourquoi l'envoyer au serveur ? De plus, la partie vérification et validation du formulaire HTML en JavaScript permet de guider l'internaute en direct, si il y a une lettre dans un numéro de téléphone, si le mot de passe n'est pas assez sécurisé, etc ... Mais surtout, gardez bien à l'esprit qu'il faudra de toute façon bien revérifier les informations soumises en PHP sur votre serveur, sinon c'est s'exposer à de gros soucis avec les vilains pirates qui feront tout pour faire tomber votre application en ligne.

En réalité, ce n'est pas vraiment du JavaScript seul que nous allons utiliser, mais le célèbre JQuery qui est une bibliothèque JavaScript très utile, elle simplifie très fortement un très grand nombre de choses. N'oubliez d'aller voir mes autres tutoriels qui utilisent JQuery avec l'utilisation de l’auto-complétion dans un formulaire de recherche, ou encore avec un cas un peu plus concret qui permet de créer un moteur de recherche de fichiers avec auto complétion.

Dans ce tutoriel, nous allons voir l'utilisation de base du plugin jquery.validate qui vous permet de valider de façon très simple et en direct si un champ de formulaire est correctement rempli. Il ne sera pas possible de soumettre le formulaire HTML au serveur tant que les informations ne seront pas correctement renseignées, ce qui permet déjà d'éliminer beaucoup de cas d'erreurs et si votre serveur subit de grosses montées en charge, de ne pas soumettre des formulaires pour rien à vérifier en PHP, enfin au moins pour les internautes "normaux".

Il va donc falloir récupérer les éléments dont nous avons besoin à savoir :

- La bibliothèque JQuery (sans elle ça va vraiment être super compliqué sinon :p)

- Le plugin jquery.validate

- Le fichier additional-methods.js

- Le fichier de langue messages_fr.js (permet d'avoir les messages d'erreurs en Français)

Comme je suis gentil, vous pouvez récupérer l'ensemble de ces éléments dans l'archive zip qui est disponible au téléchargement à cette adresse, cela vous permettra d'éviter d'aller chercher partout sur la toile.

Vous avez maintenant l'ensemble des éléments de base pour commencer ce tutoriel dans de bonnes conditions, on passe donc à la partie HTML et notre formulaire d'exemple. Attention, il faudra bien faire attention au chemins des fichiers pour les différents scripts que vous allez appeler dans le head. J'ai choisi de tout ranger dans un dossier "js" mais libre à vous de faire autrement tant que les chemins sont correct. Vous remarquerez que j’appelle le fichier script.js, je vais en parler juste après cette première partie dédiée à la page de base. Ensuite un petit bout de CSS permet d'aligner un minimum les champs du formulaire et enfin nous avons notre formulaire qui est tout ce qu'il y a de plus basique. La clause class="required" vous permet d'indiquer qu'il faut rendre la saisie de ce champ obligatoire, si vous ne souhaitez pas l'appliquer sur l'ensemble des champs il suffit de retirer cette classe sur l'input.

<html>
<head>
<title>Reposcript.com - Tuto JQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<script type="text/javascript" src="./js/jquery.js"></script>
	<script type="text/javascript" src="./js/jquery.validate.js"></script>
	<script type="text/javascript" src="./js/additional-methods.js"></script>
	<script type="text/javascript" src="./js/messages_fr.js"></script>
	<script type="text/javascript" src="./js/script.js"></script>

<style>
span{
display: inline-block;
width: 250px;
}
</style>
</head>

<body>
<form id="formulaire" method="POST" action="">
	<div><span>Nom :</span><input type="text" name="nom" class="required"/></div>
	<div><span>Prenom :</span><input type="text" name="prenom" class="required"/></div>
	<div><span>Tel :</span><input type="digits" name="tel" class="required"/></div>
	<div><span>Email :</span><input type="email" name="mail" class="required"/></div>
	<input type="submit" name="submit" value="Envoyer"/>
</form>
</body>
</html>

On va donc maintenant s'occuper de notre fichier script.js qui sera le seul que l'on va vraiment écrire. Il déterminera le comportement de base du plugin plugin jquery.validate. Nous verrons d'un un autre tutoriel comment faire des choses un peu plus poussées, je voulais ici vraiment me concentrer sur le fonctionnement de base. Le contenu de notre fichier script.js :

$(document).ready(function(){
    // Ajout d'une méthode
    $.validator.addClassRules({
    checkinput:{
        required: true,
        digits: true
    },
    checkemail:{
        required: true,
        email: true
    }	
	
});
    // Execution du plugin du plugin
    $("#formulaire").validate();
});

Avec le code suivant, si le nom ou le prénom est vide vous aurrez un message d'erreur, si le numéro de téléphone ne comporte pas que des chiffres ce sera le cas aussi et enfin vous pourrez même vérifier l’émail. Voila pour la base avec ce plugin jquery.validate. On verra prochainement comment personnaliser les messages d'erreurs, ajouter d'autres clauses de vérifications et etc ...

Classé dans : Tutoriel Javascript

Écrire un commentaire