Une fois votre document HTML
[c'est quoi?]
prêt à traiter les extensions Dojo
[c'est quoi?]
[comment?]
, vous pouvez envisager d'avoir un champ de saisie de texte plus évolué que ce qui vous est proposé par défaut. Pour cela il suffit d'ajouter un "pseudo" attribut
dojoType avec la valeur
dijit.form.ValidationTextBox à votre champ de saisie (i.e. à la balise
input de type "text"
[c'est quoi?]
). Comme suit
<input type="text" name="nomduchamp" dojoType="dijit.form.ValidationTextBox" /> |
mais pour que cela fonctionne, il faut ajouter l'objet dijit.form.ValidationTextBox à la liste des objets que vous souhaitez utiliser. Cela se fait par l'ajout d'une ligne
dojo.require("dijit.form.ValidationTextBox"); |
à la liste des paquets inclus. Comme indiqué dans le chapitre "installation"
[comment?]
.
|
<html>
<head>
<style type="text/css">
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.2.3/dojo/resources/dojo.css";
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.2.3/dijit/themes/tundra/tundra.css";
body {
margin:0;
}
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/dojo/1.2.3/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.ValidationTextBox");
</script>
<title>Dojo: Champ de saisie ValidationTextBox</title>
</head>
<body class="tundra">
<form action="">
Nom: <input type="text" name="nom" dojoType="dijit.form.ValidationTextBox"/>
</form>
</body>
</html>
|
En l'état, hormis un léger changement d'apparence, vous n'observez pas vraiment de changement par rapport à un champ ordinaire
Vous pouvez rendre ce champ "obligatoire" en ajoutant l'attribut dojo
required avec la valeur
true.
<input type="text" name="nomduchamp" dojoType="dijit.form.ValidationTextBox"
required="true" /> |
Maintenant, si vous cliquez dans le champ de saisie puis en sortez sans rien saisir alors un signal d'erreur s'affichera. Cliquez sur le signal et vous obtiendrez le message correspondant.
Les messages (d'erreur ou autres) proposés par défaut peuvent être "localisés" (pour reprendre l'anglicisme généralement utilisé). C'est à dire traduit dans la langue de l'utilisateur. Pour cela, il faut dans un premier temps, préciser dans les options de configuration, autrement dit via l'attribut dojo
djConfig, la langue utilisée (la "locale" selon un autre anglicisme couramment utilisé). Pour cela, une solution consiste à modifier la ligne d'inclusion du framework de la façon suivante:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/dojo/1.2.3/dojo/dojo.xd.js"
djConfig="parseOnLoad: true, locale:'fr'"></script> |
Les messages d'erreur peuvent être tout simplement personnalisé via l'attribut dojo
invalidMessage
<input type="text" name="nomduchamp" dojoType="dijit.form.ValidationTextBox"
required="true" invalidMessage="Pas glop"/> |
Le champ de saisie peut également être personnalisé pour afficher un message d'invitation à la saise via l'attribut dojo
promptMessage
<input type="text" name="nomduchamp" dojoType="dijit.form.ValidationTextBox"
required="true" promptMessage="Veuillez indiquer votre nom"/> |
Ce message sera alors affiché lorsque le champ reçoit le focus (typiquement lorsque l'on clique sur le champ).
/javascript/dojo/dojo_validationtextbox.html
