Vérifier ses formulaires avec Jquery

15 fév | Catégorie: Javascript | Rédigé par François | 17891 lectures

Ce petit tuto a pour but de vous faciliter la vie quand vous tentez de valider vos formulaires en utilisant la technologie Javascript. A l'aide du framework Jquery et d'un de ses plugins nommé très simplement « formvalidation », vous gagnerez un temps considérable dans la gestion des erreurs de saisie.

demo source

Avant toute chose, je souhaite vous mettre en garde : Il est toujours possible pour un utilisateur de désactiver le Javascript, il n'est donc pas très judicieux de se baser sur ces données comme étant fiables. (Un petit script de vérification PHP est donc à rajouter, mais ce n'est pas l'objet du tuto). Le fait d'avoir une vérification Javascript permet dans un premier temps d'alléger la navigation du visiteur. En effet celui-ci ne sera pas obligé d'attendre une nouvelle requête vers le serveur, étant donné que tout la vérification s'effectue sur le poste du client.

Vous pouvez dés à présent, télécharger Jquery (J'utilise la version 1.2.6, ce plugin fonctionne probablement avec les versions inférieures mais contient quelques bugs sur la nouvelle version 1.3.1) et la première version du plugin FormValidation(1.1.1).

Création du document HTML

Créez un nouveau fichier HTML que vous nommerez formulaire.html avec ceci :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-language" content="fr-FR" />
	<title>Vérification de formulaire</title>
	<!-- IMPORT Feuilles de styles -->
	<link rel="stylesheet" type="text/css" href="feuilleDeStyle.css" media="all"/>
	<!-- IMPORT Javascript -->
	<script type="text/javascript" src="jquery-1.2.6.js"></script>
	<script type="text/javascript" src="jquery.formvalidation.js"></script>
  </head>
  <body>
	<form id="formulairecontact" method="post" action="formulaire.html" >
		<fieldset>
        		<legend>Formulaire de contact</legend>
        		<label for="nom">Nom</label> 
        		<input type="text" name="nom" id="nom" value=""/>
        		<label  for="email">Email</label>
        		<input type="text" name="email" id="email" value=""/>
			<label  for="sujet">Sujet</label>
        		<select name="sujet" id="sujet">
        			<option>Séléctionnez votre choix</option>	
				<option>Choix 1</option>
				<option>Choix 2</option>
				<option>Choix 3</option>
				<option>Choix 4</option>
				<option>Choix 5</option>
			</select>
        		<label for="message">Message</label>
        		<textarea rows="10" cols="25" name="message" id="message"></textarea>
        		<button>Envoyer</button>
                </fieldset>
           </form>
  </body>
</html>

Voilà, il s'agit juste d'HTML. je fais simplement un import des 2 fichiers Javascript Jquery et son plugin (attention à l'ordre) et d'une feuille de style que je retoucherais après. Mon formulaire est sinon assez banal avec pour chaque élément input, select, et textarea un attribut id et un attribut name. La balise <label> permet de donner une information sur le champ à remplir et il est mis en relation avec ce champ en fonction de son attribut for qui correspond à l'id du champ input,select ou textarea.

Faire appel au plugin

Pour faire appel à mon plugin et le relier à mon formulaire, nous avons juste à l'initialiser en reprenant l'Id du formulaire (ici "formulairecontact"). Voici comment procéder, recopiez ses lignes de code juste après l'importation du plugin FormValidation. Ces lignes seront éxécutées lorsque la page aura été complètement chargée dans le navigateur (et l'arbre DOM mis en mémoire).

<script type="text/javascript">
	$(document).ready(function(){
		$("#formulairecontact").formValidation({
			alias		: "name",
			required	: "accept",
			err_list	: true
		}); 
               
	});
</script>

Modifier le formulaire

Nous allons à présent modifier le formulaire et signaler en HTML quels sont les champs requis, le type de contenu attendu. Pour cela nous allons ajouter des attributs qui n'ont pas de signification en HTML (et rendront donc votre page invalide). Cependant ils vous faciliteront grandement la tâche lors de la création de vos formulaires...Les 3 attributs que nous allons utilisez sont les suivants:

required : (true ou false(par défault)) cet attribut informe si un champs doit être rempli. Tous nos champs seront en required="true".
mask : La valeur de cet attribut correspond au type de données que l'on attend (téléphone, mail, site, image, code postal...), la liste est définie dans le plugin (au tout début). Je vous conseil d'y aller jeter un oeil... vous pouvez bien évidemment créer aussi vos propres masques.
defval : attribut qui donne un renseignement sur la valeur par défaut du champ. La valeur finale doit donc être différente pour être validée (ex: 'Tapez votre message ici'). Il est néanmoins essentiel d'attribuer la même variable à l'attribut value, sinon rien ne s'affichera.

Voici ce que cela peut donner:

<form id="formulairecontact" method="post" action="formulaire.html" >
		<fieldset>
        		<legend>Formulaire de contact</legend>
        		<label for="nom">Nom</label> 
        		<input required="true" type="text" name="nom" id="nom" value=""/>
        		<label  for="email">Email</label>
        		<input type="text" mask="email" required="true" name="email" id="email" value=""/>
			<label  for="sujet">Sujet</label>
        		<select required="true" defval="Séléctionnez votre choix" name="sujet" id="sujet">
        			<option>Séléctionnez votre choix</option>	
				<option>Choix 1</option>
				<option>Choix 2</option>
				<option>Choix 3</option>
				<option>Choix 4</option>
				<option>Choix 5</option>
			</select>
        		<label for="message">Message</label>
        		<textarea rows="10" cols="25" required="true" name="message" id="message"></textarea>
    		       <button>Envoyer</button>
                </fieldset>
</form>

J'avoue que le fait de rajouter des attributs inexistants dans un fichier qui plus est, est un document xHTML n'est pas sémantiquement très correct. Mais ça a le mérite de vous éviter quelques galères pour la validation de vos formulaires.

Un formulaire basique!

Enfin nous avons fini notre validation de formulaire (si si...). Je vous l'accorde c'est pour l'instant très moche. Il reste encore quelques choses à modifier et à ajouter (traduire le plugin, le styliser et annoncer les erreurs autrement que dans une popup...).

Amélioration du Plugin

Tout d'abord, il faut veiller à traduire le plugin. Voici les quelques lignes qui nous dérangent : ligne 97, 102, 103 et 104.

Ensuite nous allons faire en sorte que le message d'erreur ne s'affiche plus dans un vulgaire Alert ligne 117. L'idée est ici de remplir un paragraphe class="error". Initialement vide dans le code html comme ceci:

<legend>Formulaire de contact</legend>
<p class="error"><br /></p>
<p class="notice">Veuillez patienter</p>
<label for="nom">Nom</label>

Avec les propriétés CSS suivantes (dans le fichier feuilledestyle.css). D'ailleurs j'en profite pour styliser les champs du formulaire qui sont faux (Le plugin , lors de la validation change leurs attributs class à "invalidInput").

.invalidInput, .error{
        color:#8a1f11;
        background-color:#fbe3e4;
}
.error,.notice{
        padding:0.5em;
        margin:0.5em;
}
.error{
	border:2px solid #8a1f11;
	display:none;
}
.notice {
	background-color:#FFF6BF;
	color:#514721;
	border:2px solid #FFD324;
	display:none;
}

Reprenons maintenant notre plugin formValidation et réécrivons cette ligne 117 afin d'afficher le contenu des erreurs dans le paragraphe <p class="error"></p>.

Cela nous donne ce code, que vous pouvez remplacer par les lignes 116 et 117:

			
if (!frm && settings['display_alert']){
        $("form .error").html(settings['err_message'] + err_list);
		if ($("form .error").is(":hidden")){
                    $("form .error").slideDown("slow");
                }
        }
        else{
                if ($("form .notice").is(":hidden")){
                           $("form .notice").slideDown("slow");
                }
      }

Le code est assez parlant, si le formulaire contient des erreurs alors nous mettons notre variable avec les erreurs dans le paragraphe .error . S'il est en display:none; (par défault en CSS) Alors on l'affiche avec l'effet déroulant slideDown. Enfin s'il n'y a pas d'erreurs, on affiche le paragraphe qui indique à l'utilisateur de patienter (en attendant que la page se rafraîchisse). Comme vous pouvez le voir si vous avez testé ce code, les erreurs s'affichent sans retour à la ligne, ce qui n'est pas très élégant: Modifiez donc les lignes dans les fonctions required, mask et equal, lors de l'ajout de l'erreur à la variable err_list rajouter une balise <br />. Comme ceci par exemple pour la fonction required :

			
err_list += '<br />» "' + obj.attr(settings['alias']) + '" ' + err_msgs['required'] + '\n';

Voila le tuto semble se terminer. Il ne reste plus qu'à rendre le formulaire un peu plus agréable en CSS. Voici ma proposition (feuilledestyle.css):

			
.invalidInput, .error{
color:#8a1f11;
background-color:#fbe3e4;
}
.error,.notice{
padding:0.5em;
margin:0.5em;
}
.error{
	border:2px solid #8a1f11;
	display:none;
}
.notice {
	background-color:#FFF6BF;
	color:#514721;
	border:2px solid #FFD324;
	display:none;
}
form{
	width:500px;
	margin:auto;
	background-color:#e5e5e5;
	border-radius:1em; /*Trop cool pour IE :) */
	-moz-border-radius:1em; /*Trop cool pour IE :) */
}
form *{
	font-size:1.0em;
	font-family:georgia;/*on my mind!!*/
}
form fieldset{
	border:none;
}

form legend{
	font-size:2em;
	color:#777;
	margin-top:0.3em;
}
form label{
	display:block;
	float:left;
	width:150px;
	text-align:right;
}
form input, form select, form textarea{
	width:300px;
	margin-bottom: 1em;
	margin-left:0.5em;
}
form button{
	position:relative;
	left:160px;
}

Merci pour votre attention! Je suis preneur si vous pouvez améliorer mon CSS!

Cette création par Snoupix.com est mise à disposition selon les termes de la licence Creative Commons.

Partager ce tutoriel :

48 Commentaires

le 18 février à 17h36 ThibZ Répondre Je pense qu'il y a une petite erreur pour le fichier html, le label du sujet est appelé "email".
Comme sur votre capture d'écran avec l'alert Javascript je n'ai pas réussi à demander une validation pour le textarea.
En tout cas très bon tuto ! Ca marche super, excepté pour le textearea mais je dois me planté quelque part.

le 18 février à 21h05 François Répondre T'utilises bien la version 1.2.6 de Jquery et la version 1.1.1 du plugin?
Si je me souviens bien j'ai eu le même soucis, mais je sais qu'il y'a des petits bugs entre certaines versions...Et quand j'ai du faire la copie d'écran de l'alert je n'avais pas les bons fichiers surement...En tout cas ca ne peut être du qu'à ca...

Sinon je répare ma petite erreur, merci!

le 04 mars à 12h09 Alas Répondre J'ai essayer d'utiliser le script avec la version 1.3.1 de Jquery, et cela pose quelque bug. La vérification fonctionne correctement, c'est à dire que le message d'erreur s'affiche bien, mais le problème vient après, lorsqu'il faut corriger les erreurs les champs restent toujours en rouge et la validation ne se fait plus, donc impossible d'envoyer le form. En repassant avec la version de 1.2.6 de Jquery le script fonctionne bien.

le 04 mars à 12h15 François Répondre Réponse à Alas:J'ai essayer d'utiliser le script avec la version 1.3.1 de Jquery, et cela pose quelque bug. La vérification fonctionne correctement, c'est à dire que le message d'erreur s'affiche bien, mais le problème vient après, lorsqu'il faut corriger les erreurs les champs restent toujours en rouge et la validation ne se fait plus, donc impossible d'envoyer le form. En repassant avec la version de 1.2.6 de Jquery le script fonctionne bien.

Oui en effet, j'avais testé aussi avec 1.3, mais ca ne fonctionnait pas. En attendant une autre version du plugin, il n'y a pas d'autres alternatives...

le 24 mars à 22h04 Damocles Répondre J'ai noter une erreur relative aux emails.
Le mask" email : /^([\w.])+\@(([\w])+\.)[a-zA-Z0-9]{2,}/,", ne permet pas de rentrer un email du type nom.prenom@domaine.com car dans la première partie de la regex certaines ponctuations comme le point ont étaient oubliées.
Il faut donc remplacer le mask email :
email: /^([a-zA-Z0-9_-])+\@(([\w])+\.)[a-zA-Z0-9]{2,}/,

le 25 mars à 00h16 Francois Répondre Exact, j'ai découvert aussi ce petit soucis il y'a quelques jours!

le 02 avril à 20h28 Franck Répondre Bonjour, j'essai d'utiliser jquery pour la validation d'un formulaire et j'ai un petit soucis de mise en forme.. je souhaiterai faire apparaitre l'image valide ou non à coté du champ du formulaire..actuellement il s'affiche en dessous et cela décale la mise en page du formulaire..
si vous avez une petite solution à me proposer je suis preneur
La prochaine fois j'appliquerai votre tuto mais la je suis bloqué

le 03 avril à 00h20 Francois Répondre Ca doit être un problème de CSS. vérifie que ton icone ne soit pas en display:block ou dans une div Sinon agrandit le width de ton formulaire (ou fieldset si tu en as un).

le 10 avril à 16h28 Malonix Répondre Bonjour je suis en train de travailler avec ce tuto qui à mon gout est super bien fait, Bien joué l'auteur... Mais j'ai un petit problème, peut être que vous avez déjà eu... Donc en faite quand je valide la première fois mon formulaire les erreurs apparaissent bien, je remplis au hasard un champ obligatoire, et je re-valide et c'est là que viens le soucis : dans le message d'erreur, j'ai le nom du champ avec la chaine de caractère suivante "invalidInput". J'ai essayé d'enlever la varible(variable : err_class ) dans le js qui avait cette chaine de caractère, mais il enlève les couleurs des cadres (par exemple)... Donc voila si vous avez reussi à régler le problème ca serait gentil de partager xD

le 10 avril à 17h43 Francois Répondre Euh quand tu initialises ton formulaire en Javascript,
tu mets bien cette ligne:
err_list : true
Tu as peut etre mis ca:
err_class : true

Sinon je vois pas ...Dis moi si ca marche pas...

le 14 avril à 11h17 Malonix Répondre Donc voila j'ai bien mis err_list, je te transmets la déclaration du js.

Euh est ce que ca peut venir de la version du JQuery?

le 14 avril à 11h18 Malonix Répondre $(document).ready(function(){
$("#form_contact").formValidation({
alias : "class",
required : "accept",
err_list : true
});

});

le 14 avril à 16h15 Francois Répondre Tu as bien remplis le nom de tes champs dans l'attribut "class"??
Sinon ouai ca peut venir de ta version de Jquery. J'en ai déjà parlé et ca fonctionne pas sur les versions supèrieures à 1.3, mais nickel pour la 1.2.6

le 15 avril à 09h23 Malonix Répondre Pour la version de JQuery j'ai pris la version que tu avais mis dans tes sources pour être sur...

Ensuite est ce que ca ne viendrait pas du framework symfony, comme je travail avec?

Donc voila ce que tu as dis avec l'attribut 'class' m'a interpelé, donc j'ai regardé dans les souces, quand je charge la page, l'attribut est bien "class=nomAttribut", quand je charge avec au moins une erreur, l'attribut devient "class=nomAttribut InvalidInput"...

donc voila j'espère pouvour régler un jour le problème.

le 15 avril à 12h57 ariden Répondre Merci pour ce petit tuto

le 19 avril à 00h03 kid Répondre bonjour ,

j'aimerais savoir ou doit-on placer notre adresse mail s.v.p

le 27 avril à 10h55 Thomas Répondre Réponse à Francois:Exact, j'ai découvert aussi ce petit soucis il y'a quelques jours!
Bonjour, bravo pour ce tuto ! Petite remarque les email nom@domaine-domaine.org ne passe pas... Un problème dans le masque sans doute.

le 01 mai à 21h42 stefde10 Répondre Bonjour,

j'ai installé votre script sur mon site mais cela ne donne absolument rien côté vérification... mon Formulaire est valide à chaque fois et envoi le mail.

Pourriez-vous m'indiquer la démarche à suivre pour régulariser ce problème svp ?

Voici le lien concerné :

http://www.weblobsdesigner.fr/quote.php

D'avance merci,

Cordialement,

Stefde10

le 02 mai à 03h08 François Répondre Tu as oublié l'identifiant sur ta balise form...
Tchao

le 02 mai à 11h16 stefde10 Répondre ça ne change absolument rien du tout malheureusement...

de plus cet "ID" sort d'où exactement car je la retrouve nulle part.

Désolé mais je suis ce qu'on pourrai appeler un noob en la matière

le 02 mai à 11h53 stefde10 Répondre ça y est j'ai compris d'où venait mon erreur...

ça fonctionne nickel maintenant..

cependant, j'aurai aimé savoir si il était pas possible de faire apparaitre la fenêtre des erreurs plutôt sur la droite de mon Formulaire et si possible, comment faire svp ?

Cordialement,

Stefde10

le 13 mai à 10h45 marjorie Répondre Merci pour ces infos utiles !

le 13 mai à 10h52 vectorSKIN Répondre Sympa et facile à mettre en place, par contre cela ne fonctionne pas du tout sur Safari

le 11 juin à 12h49 simply user Répondre Bonjour,
j'utilise ce tutoriel pour vérifier mon formulaire, cependant j'ai un problème.

Les attributs "mask" et le "deval" dans les <input> ne sont pas validés par W3C et j'ai dans l'obligation que mon HTML soit valide pour la norme W3C

Quelqu'un connait il un moyen d'adapter le code ?

Merci d'avance

le 11 juin à 14h23 david Répondre c'est moi ou le script ne fonctionne pas sous IE ?

le 11 juin à 14h38 François Répondre simply user -> Oui c'est le petit hic de ce plugin, tu pourrais par exemple mettre ces informations dans un attribut type class... class="required" ou class="mail required"... Mais là par contre il faudrait retoucher au javascript.

David -> Oui je viens de voir ca, ca marche pas sur IE8 (ca met une erreur assez bizarre, je vais essayer de voir ce qui va pas). Sinon y'a un mode de rétrocompatibilité avec lequel ca marche s'il est activé... Qu'est ce qu'ils sont chiants chez Microsoft :s

le 11 juin à 16h12 simply user Répondre Tout d'abord, merci pour ta réponse rapide François.

Je viens de changer l'attribut "mask=email" par "accept=email" dans le HTML et j'ai donc modifié le javascript en conséquence.
Le code devient conforme pour la norme.

Cependant il me reste le problème de l'attribut "deval".

le 11 juin à 16h36 simply user Répondre Je réponds à ma question

L'attribut "Deval" peut être simplement supprimé en changeant une condition dans le Javascript.

if ((obj.val() == ' ')||(obj.val() =='Valeur défaut'))

le 11 juin à 18h48 François Répondre oh je connaissais même pas l'attribut accept pour les formulaires, merci pour l'info.

Sinon c'est un peu dommage d'écrire ta valeur dans le plugin directement (ca veut dire que tu ne pourras pas l'utiliser à un 2e endroit.
Tu peux aussi plus simplement faire comme ca
<select>
<option selected="selected">ton choix</select>
ca te le sélectionnera automatiquement.

le 17 juin à 14h09 Damocles Répondre Bonjour à tous,

je voulais savoir si il était possible d'utiliser formvalidation pour contrôler la saisie des champs input du type checkbox et radio ?

le 17 juin à 14h33 ClemClem Répondre Bonjour j'ai testé ce plugin qui est pas mal du tout, merci...

Mais voila j'ai un soucis avec des champs qui n'ont que l'attribut required... Il me met toujours qu'ils sont requis alors qu'il soit vide ou pas.

Est ce que c'est parce que j'utilise la version de JQuery 1.3.2 ?

Si oui est ce qu'il y a moyen de le contourner ou pas?

le 17 juin à 21h28 François Répondre Ouai ce plugin n'est malheureusement plus mis à jour...:s
sinon Damocles, ouai tu peux bien l'utiliser pour des checkbox, mais j'avoue que je n'ai pas vérifié...

le 30 juin à 10h48 simply user Répondre Des nouvelles pour la compatibilité avec internet explorer 6 et 7 ?

le 03 septembre à 22h59 patrice Répondre Ma contribution à ce code que j'ai intégré à une appli web.

Le contrôle d'email est meilleure avec cette regex :
/^[-a-z0-9!#$%&\'*+\/=?^_`{|}~]+(\.[-a-z0-9!#$%&\'*+\/=?^_`{|}~]+)*@(([a-z0-9]([-a-z0-9]*[a-z0-9]+)?){1,63}\.)+([a-z0-9]([-a-z0-9]*[a-z0-9]+)?){2,63}$/i

le 14 septembre à 00h57 dkm Répondre Bonjour à tous,

Bravo pour le tuto, très bien fait et fonctionne à merveille.

J'ai un petit soucis, l'utilisation du plugin met sur tout mes formulaires le même desing du formulaire de contact! auriez-vous une petite idée ?

bien à vous!
dkm

le 14 septembre à 22h17 François Répondre Slt!
Ouai en fait en CSS j'ai mis form legend, form label

Tu peux plutôt les selectionner comme ca
#identifiantDeTonForm legend
#identifiantDeTonForm label
...etc

le 09 novembre à 19h04 creaam Répondre Salut,

ça ne fonctionne pas avec ie8.

a++

le 23 décembre à 18h06 grrr Répondre enleve ce script, il est bourré de bug....

le 01 février à 10h56 Jutix Répondre Ouais ya un problème avec IE =/ ...

le 11 mai à 03h00 yannlc Répondre Merci bcp. On pourrait traiter le formulaire encore plus en profondeur avec des conditions pour ajouter d'autres type d'erreur (exemple: regexp pour la validité de l'email)! Avec jquery le monde est magique.

le 25 mai à 00h06 Pikoo` Répondre Très bon tutoriel

Je voudrais savoir s'il était possible de nous expliquer le notion de "equal" parce que sur mon formulaire d'inscription l'utilisateur doit indiquer un mot de passe et doit le confirmer. Les deux champs doivent être égaux. Est il possible d'utiliser ce module avec mon problème ?
Je vous remercie.

le 25 mai à 00h07 Pikoo` Répondre Et aussi (désolé de l'oublie), faire revenir la page au plus haut (faire une redirection vers ./inscription.php#)

Merci.

le 30 mai à 10h58 totofe Répondre Existe t-il une vérification pour une date?

le 13 juin à 21h36 Yann Répondre problème sur la démo! (lorsqu'on clique sur le submit)

le 15 juin à 12h10 Gloum Répondre Super solution pour contrôler les champs mais il y a un toujours un bug avec IE8 !
Il détecte une erreur javascript. C'est très frustrant de ne pas pouvoir utiliser cette solution à cause de l'incompatibilité avec IE8. As-tu résolu le problème ?

le 15 juin à 17h54 Pseudo Répondre Le formulaire il m'ache plus

dommage

le 17 juin à 13h23 FireSKT Répondre Chez moi il fonctionne

Par contre sous chrome il n'affiche pas l'alerte. Oui il bloque le submit mais il n'affiche rien. Un soucis avec <p class="error"></p> et chrome ? Il n'arriverait pas à insérer les erreurs dans la balise p ?

le 20 juillet à 15h33 __data__ Répondre Super plugin, néenmoins j'ai aussi rencontré un soucis sous IE8, j'ai donc modifier la ligne 168 en enlevant @ au selecteur.
Aussi sous safari le submit n'etait pas opérationel dû a la gestion du champ required par un nouvel attribut, je l'ai gerer par une class (class="required")
La ligne 166 est remplacé par ceci if (!obj.hasClass('required')).

Pour une meilleur gestion et évitai l'ajout d'attribut je passerai tout les masks via la class de l'element.

Pour des raisons d'accessibilté il est bon de gerer les erreurs par l'attribut title de l'element

Vérifier ses formulaires avec Jquery | Snoupix