Créer un formulaire d’inscription avec dojo

Dojo est particulièrement efficace lorsqu’il s’agit de faire de la validation de formulaire.
Je vais ici vous proposer un tutoriel étape par étape qui va vous permettre de créer un formulaire d’inscription basique, avec les vérifications nécessaires.
Le formulaire en question ne comportera que 4 champs: Email, vérification de l’email, mot de passe et vérification du mot de passe.

Pour info: Je suis un webmaster indépendant situé en Normandie.

Etape 1

Téléchargez la dernière version de dojo (ici) et la décompresser dans le dossier comprenant votre site. Pour plus de simplicité je renomme le dossier « dojo-release-x.x.x » en dojo pour me retrouver avec comme arborescence:
monsite/dojo/dijit
monsite/dojo/dojo
monsite/dojo/dojox

Etape 2

Je créé mon fichier « acces_pro.php » (ouai, pour le coup, je vous fait le tuto en temps réel car je développe un site avec un accès professionnel. Libre à vous de renommer les fichiers comme bon vous semblera) et j’y insère les entêtes HTML nécessaires

<!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" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<body>

D’avance pour pas oublier je referme mes balises à la fin de mon fichier

</body>
</html>

Etape 3

J’appelle mon fichier dojo.js pour pouvoir utiliser les fonctions qu’il contiens, Pour cela je place entre les balises et de mon fichier le code suivant

<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad: true"></script>

djConfig= « parseOnLoad:true » indique à dojo de scanner le fichier une fois celui-ci chargé pour trouver des instructions « dojo ».

Etape 4

J’indique ensuite qu’elles sont les fonctions qui vont être utilisées dans mon fichier. Je rajoute donc le code suivant entre les balises

<head>

et

</head>
<script type="text/javascript">
   dojo.require("dijit.form.ValidationTextBox");
   dojo.require("dojox.validate.regexp");
   dojo.require("dijit.form.Form");
   dojo.require("dijit.form.Button");
</script>

dijit.form.ValidationTextBox permet d’utiliser les fonctions de validation des champ de texte.
dojox.validate.regexp contient des expression régulière toute faites (très utile dans notre cas).
dijit.form.Form permet de transformer le formulaire en widget.
dojo.require(« dijit.form.Button ») permet d’utiliser les widget bouton.

Etape 5

On ajoute maintenant les fichiers css nécessaires en plaçant ce code entre les balises

<head>

et

</head>
<link rel="stylesheet" href="dojo/dojo/resources/dojo.css" />
<link rel="stylesheet" href="dojo/dijit/themes/tundra/tundra.css" />

tundra.css correspond au fichier css du thème tundra il en existe d’autre et vous pouvez créer vous même votre propre thème css.

Etape 6

On applique le thème tundra au document en ajoutant la class tundra sur la balise body

<body class="tundra">

Etape 7

On ajoute les balises qui vont créer le formulaire

<form action="acces_pro.php" method="post" enctype="multipart/form-data" id="formInscription" dojoType="dijit.form.Form">
</form>

l’id nous servira par la suite lors de la validation globale du formulaire
le dojoType permet de signaler à dojo que cet élément est un formulaire.

On placera les codes qui vont suivre à l’intérieur des balise

<form>

et

</form>

Etape 8

On place notre premier champ email en utilisant le code dojo suivant:

Email:
<input id="email1" type="text" name="email1" class="long" value=""
    dojoType="dijit.form.ValidationTextBox"
    regExpGen="dojox.validate.regexp.emailAddress"
    trim="true"
    required="true"
    invalidMessage="Email non valide." /><br />

– dojoType permet de signaler à dojo à quel type de champ on à a faire.
– RegExpGen permet de vérifier le format de ce qui sera tapé dans ce champ (ici un email)
– trim permet de supprimer les espaces avant et après le texte tapé dans le champ
– required indique que le champ ne peut rester vide
– invalidMessage vous permet d’indiquer le texte qui sera affiché si le champ est mal rempli.

Etape 9

On place le second champ email en ajoutant une vérification par rapport au premier.

Confirmation email:
    <input type="text" name="email2" class="long" value=""
	    dojoType="dijit.form.ValidationTextBox"
	    trim="true"
	    required="true"
	    validator="return this.getValue() == dijit.byId('email1').getValue()"
	    invalidMessage="Retapez votre email à l'identique ici" /><br />

– On a supprimer le regExpGen qui devient inutile (car on fait une vérification sur un champ sensé être valide)
– validator permet de vérifier que la valeur du champ est identique à celle du champ email précédent. On fait référence au premier champ email en utilisant l’id « email1 »

Etape 10

On ajoute notre premier champ mot de passe.

 mot de passe:
    <input type="password"
    	id="mdp1"
    	name="mdp1"
    	dojoType="dijit.form.ValidationTextBox"
    	required="true"
    	trim="true"
    	invalidMessage="Le mot de passe est nécessaire" /><br />

Rien de nouveau ici.

Etape 11

On ajoute notre champ de confirmation de mot de passe.

Confirmation mot de passe:  
	<input type="password"
    	name="mdp2"
    	dojoType="dijit.form.ValidationTextBox"
    	required="true"
    	trim="true"
    	validator="return this.getValue() == dijit.byId('mdp1').getValue()"
     	invalidMessage="Retapez votre mot de passe à l'identique ici" /><br />

Ici on utilise à nouveau validator pour vérifier que les champs mot de passe son identiques. L’idée utilisée pour faire référence au premier champ mot de passe est ici « mdp1 »

Etape 12

On ajoute un bouton qui va soumettre le formuaire après avoir vérifié que tous les champs étaient correctement remplis.

<input type="submit" label="inscription" dojoType="dijit.form.Button" onClick="dijit.byId('formInscription').validate();"/>

l’instruction dijit.byId(‘formInscription’).validate() ajouté dans le onclick permet de vérifier la validité de tous les champs du formulaire dont l’id est « formInscription » au moment du clic sur le bouton.

Voilà votre formulaire est terminé et les validations sont en place.

A propos

Technophile passionné par le web, Je travaille actuellement en tant qu'Expert Dojo auprès de la banque ING aux Pays Bas. http://www.linkedin.com/in/santalucia

Publié dans tutoriels Tagués avec :
Un commentaire pour “Créer un formulaire d’inscription avec dojo
1 Pings/Trackbacks pour "Créer un formulaire d’inscription avec dojo"
  1. [...] Créer un formulaire d’inscription avec dojo | dojotoolkit-fr.org On place notre premier champ email en utilisant le code dojo suivant: Email : Etape 8 dojoType = "dijit.form.ValidationTextBox" [...]

Laisser un commentaire