form

Vérifier ses formulaires avec Jquery

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.

 

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

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

.

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
. 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!

53 commentaires

S'abonner au RSS des commentaires
  1. wiwi
    Posté le 25/03/2012 à 8h05

    Bonjour, le code marche merci pout le partage mais le message d’erreur est en anglais comment je peut le modifier en francais ?

  2. fab
    Posté le 11/11/2011 à 14h49

    ca ne fonctionne pas sous IE9

  3. darjadida
    Posté le 21/01/2011 à 0h45

    Bonjour,

    très bonne explication

    merci

  4. buxan
    Posté le 21/12/2010 à 18h20

    Bonjour,

    j’ai testé la demo, mais ça ne marche pas.
    Faut-il installer Jquery au préalable?

  5. Kevin
    Posté le 16/08/2010 à 19h45

    Bonjour,

    Très bon script!! Comment utiliser le equal? J’aimerais vérifier si mes deux mails sont égaux?

    Merci d’avance,

    Kevin

  6. __data__
    Posté le 20/07/2010 à 15h33

    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

  7. FireSKT
    Posté le 17/06/2010 à 13h23

    Chez moi il fonctionne smile
    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 ?

  8. Pseudo
    Posté le 15/06/2010 à 17h54

    Le formulaire il m’ache plus sad dommage

  9. Gloum
    Posté le 15/06/2010 à 12h10

    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 ?

  10. Yann
    Posté le 13/06/2010 à 21h36

    problème sur la démo! (lorsqu’on clique sur le submit)

  11. totofe
    Posté le 30/05/2010 à 10h58

    Existe t-il une vérification pour une date?

  12. Pikoo`
    Posté le 25/05/2010 à 0h07

    Et aussi (désolé de l’oublie), faire revenir la page au plus haut (faire une redirection vers ./inscription.php#)

    Merci.

  13. Pikoo`
    Posté le 25/05/2010 à 0h06

    Très bon tutoriel smile
    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.

  14. yannlc
    Posté le 11/05/2010 à 3h00

    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.

  15. Jutix
    Posté le 01/02/2010 à 10h56

    Ouais ya un problème avec IE =/ …

  16. grrr
    Posté le 23/12/2009 à 18h06

    enleve ce script, il est bourré de bug….

  17. creaam
    Posté le 09/11/2009 à 19h04

    Salut,

    ça ne fonctionne pas avec ie8.

    a++

  18. François
    Posté le 14/09/2009 à 22h17

    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

  19. dkm
    Posté le 14/09/2009 à 0h57

    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

  20. patrice
    Posté le 03/09/2009 à 22h59

    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

  21. simply user
    Posté le 30/06/2009 à 10h48

    Des nouvelles pour la compatibilité avec internet explorer 6 et 7 ? hmm

  22. François
    Posté le 17/06/2009 à 21h28

    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é…

  23. ClemClem
    Posté le 17/06/2009 à 14h33

    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?

Laisser un commentaire

Votre e-mail ne sera jamais publié ni communiqué. Les champs obligatoires sont indiqués par *

*
*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>