Initialisation et validation de formulaires

En deux mots...

InitForm est une fonction javascript "maison" qui permet d'initialiser un formulaire à partir d'un objet javascript. Cet objet peut lui-même avoir été envoyé par le serveur (via JSON), après lecture des paramètres cgi, ou d'un fichier de configuration.

wforms est un biblitohèque opensource permettant entre autres de valider très simplement les formulaires

Expérimenter

si vous voulez modifier ce fichier ou le fichier InitFormTest.js, qui permet d'agir sur les paramètres, il vous faudra travailler sur vos fichiers à vous. Pour cela, vous devrez taper:

svn export http://lipm-svn.toulouse.inra.fr/svn/lipmutils/trunk/javascript

Portabilité

Cette page web a été testée sur les navigateurs suivants:

Firefox 2.x sous ubuntu 7.10
Internet Explorer 6 sous windows 2003
Internet Explorer 7 sous windows XP
Opera 9.25 sous Ubuntu 7.10
Konqueror 3.5.8 sous ubuntu 7.10

Le fichier InitForm.js définit plusieurs fonctions, utiles lorsqu'on travaille sur des formulaires:

InitForm initialise un formulaire à partir d'un objet javascript. Cet objet peut avoir été lu depuis un fichier de configuration ou initialisé depuis les paramètres d'un script CGI puis transmis via JSON, etc.
DisableRadio désactive (disable) les boutons d'un ensemble de radio-boutons. On lui a passé en paramètres la liste des boutons à désactiver, les autres boutons appartenant au même ensemble seront activés.
EnableRadio active (enable) les boutons d'un ensemble de radio-boutons. On lui a passé en paramètres la liste des boutons à désactiver, les autres boutons appartenant au même ensemble seront désactivés.

InitFormTest.js

Dans cette démo, l'objet est défini dans le fichier InitFormTest.js, que vous pouvez modifier à votre guise. Bien sûr, dans la "vraie vie", il viendrait plutôt du serveur

Les attributs de l'objet passé en paramètre:

Le nom de chaque attribut doit être:

Le nom d'un champ du formulaire (attribut name): dans ce cas, la valeur de l'attribut permet de définir la valeur par défaut du champ
Le nom d'un champ de formulaire précédé de hide_: dans ce cas, si la valeur est différente de 0, le champ correspondant sera caché, sa valeur sera celle du champ name (s'il n'est pas spécifié l'attribut hide_ sera ignoré
Le nom d'un champ de formulaire de type checkbox précédé de ck_ (cf. ci-dessous)

Les attributs actuels et leurs valeurs

Comment supprimer un champ ?

La fonction InitForm permet de "cacher" certains champs de formulaire. Pour que le champ toto soit caché, il faut:

Identifier un élément html ancêtre de toto, c'est lui qui sera éventuellement caché (et ses descendants avec lui). Cet élément peut être toto lui-même, mais ce sera le plus souvent un ancêtre, afin de cacher en même temps le label.
Faire appartenir cet élément à la classe Removable
Donner une valeur par défaut à toto en définissant le paramètre correspondant
Dès lors, si le paramètre hide_toto vaut 1, l'ancêtre sera retiré du formulaire

<span class="Removable" ><input type='text' name='input' /><label> input</label></span><br />

Comment rendre un champ obligatoire ?

Cette fonctionnalité est apportée par la bibliothèque wforms:

Charger les fichiers wforms/wforms_core.js et wforms/wforms_validation.js
Faire appartenir l'élément obligatoire à la classe required

<span class="Removable" ><input type='text' name='output' class="required" /><label> output</label></span><br />

Le formulaire initialisé automatiquement

output est un champ obligatoire !

Trois champs text, ils peuvent être retirés tous les trois, le second est requis:

Les trois champs sont à l'intérieur d'un span de classe "Removable", du coup le span (et ce qu'il y a en-dessous) est caché dès que la propriété hide_ est à 1
Le champ input appartient à la classe "required", du coup il est requis

input
output
2nde output

Cliquez sur un bouton de la première ligne et un bouton de la seconde

Pour que certains boutons soient inactifs, on appelle la fonction DisableRadio ou EnableRadio/. C'est à la fin du fichier InitFormTest.js

Le fichier InitFormTest.js propose un petit objet permettant de synchroniser les deux lignes. Cet objet n'a rien de générique, il est simplement là pour montrer ce qu'il est possible de faire

0 1 2 3 4 5

choisissez (un seul choix possible)

Attention, le paramètre hide_liste vous permettra de faire disparaitre la liste, il est impossible de faire disparaitre une des options.

choisissez (plusieurs seul choix possibles)

Les options présélectionnées sont fournies avec le format: 1#3#5

Attention, le paramètre hide_listem vous permettra de faire disparaitre la liste, il est impossible de faire disparaitre une des options.

Cochez ou décochez les cases que vous voulez

Les cases à cocher sont les plus casse-pieds à gérer: en effet, si une case n'est pas cochée, elle n'apparaitra pas dans la liste des paramètres du cgi appelé. En conséquence de quoi, si la valeur par défaut de la classe est 'cochée' et que l'utilisateur la décoche, le script cgi aura bien du mal à s'en apercevoir. La solution apportée par InitForm est la suivante:

Pour une case appelée box1, fournissez également un champ de type hidden appelé ck_box1
Donnez une valeur par défaut (1 ou 0) à ce champ
Dès que l'utilisateur cliquera sur box1, le champ ck_box1 changera de valeur
Dans le cgi, ignorez le paramètre box1, occupez-vous uniquement de ck_box1
Evitez d'observer les événements produits par la boite à cocher: si on ajoute un gestionnaire d'évènements sur la boite à cocher, on n'a aucune raison de penser que celui-ci sera déclenché après l'évènement de synchronisation traité par InitForm: vous risquez alors d'avoir des incohérences dans votre formulaire. La bonne méthode est d'observer l'événement personnalisé 'initform:click' sur le champ caché ck_box1: celui-ci est généré par InitForm, il arrivera après la synchronisation des champs.

Dans l'exemple qui suit, la case box6 n'est pas gérée de cette manière car le paramètre ck_box6 n'est pas fourni: le champ hidden ck_box6 n'est tout simplement pas utilisé. Donc si vous voulez que ce mécanisme soit activé, vous devez fournir une valeur par défaut

Attention Si vous utilisez Webdevelopper sous firefox, et si vous activez l'option Forms/Display Forms Details, cela risque de ne pas fonctionner, parce que les champs cachés ne sont justement plus marqués comme "hidden" (ce qui permet de les voir).

Option 1
Option 2
Option 3
Option 4
Option 5
Option 6