Formulaire demande

document demande.html

Il faut valider tous les éléments du formulaire

Ils sont au nombre de 14

Ils ont été identifiés par un id construit de la façon suivante

une chaîne de caractères id_ à laquelle est associé un nombre X en

incrémentation

Par exemple le champ nom possède l'id id_2

<input name="nom" type="text" class="boxTxtFormLoc" id="id_2" alt="le Nom"/>

Cette dénomination va nous permettre d'utiliser une boucle pour tester l'un
après l'autre tous les champs identifiés ainsi.

// la fonction

function checkRemplissage(){

Dans cette fonction nous allons créer une variable qui va contenir les
éventuels messages d'erreur. Si cette variable, qui est déclarée vide, est
toujours vide à la fin du processus c'est qu'il n'y aura pas eu d'erreurs, sinon
les erreurs seront affichées.

//initialisation de la variable d'erreurs

erreur = "";

Nous allons insérer le premier test sur les boutons radio.

javaScript demandes Stéphane Jeanneau © 2008 page n° 1

Les boutons radio fonctionnent sur le mode des tableaux

L'exemple suivant fait référence aux trois boutons radio id_0 du formulaire
form1.

document.form1.id_0[0]
document.form1.id_0[1]
document.form1.id_0[2]

Le test va se faire sur la valeur checked des boutons

document.form1.id_0[1].checked == true;

Ce qui va donner dans la boucle

for(z=0;z<3;z++){

// l'un des 3 radios est coché?

if(document.form1.id_0[z].checked == true){
// la variable d'erreur est vidée
erreur = "";

//si l'un est coché on arrête la boucle

break;

}else{

//non coché la variable d'erreur est remplie

erreur = "Une Civilité n'est pas cochée.\n";

}
}

//fin boucle radio

javaScript demandes Stéphane Jeanneau © 2008 page n° 2

La boucle sur les 12 premiers éléments du formulaire les boutons exceptés.

Nous allons nous servir de l'élément alt de chaque élément id_ testé pour
afficher des message d'erreur accentués.
Il est dangereux de placer des caractères autres que alpha-numériques dans des
noms de variables. Si nous utilisons les noms pour les messages d'erreurs nous
aurons alors des messages non accentués.

Dans cette boucle nous allons tester si les champs ont une valeur supérieure
à zéro donc sont considérées comme existantes (true).

Le point d'exclamation placé avant la variable va être équivalent à est

différent de

exemple : a != false est équivalent à !a

ce qui donnera dans notre cas :

if(!document.getElementById("id_"+n).value){

la boucle

for(n=1;n<=12;n++){

//est-ce que l'élément recherché est rempli?

if(!document.getElementById("id_"+n).value){

//les erreurs s'ajoutent

erreur += document.getElementById("id_"+n).alt;

//on va à la ligne dans l'alert

erreur+="\n";

} //fin if

} //fin boucle

On remarque qu'un élément est indéfini : undefined.

C'est le cas du champ textarea ou le alt est inopérant. Il va donc falloir pour
cet élément court-circuiter cet élément. Nous connaissons son nom donc il
suffit de tester le moment de la boucle où le nom est celui du textArea et
utiliser le name en place du alt.
javaScript demandes Stéphane Jeanneau © 2008 page n° 3
la boucle modifiée

for(n=1;n<=12;n++){

//est-ce que l'élément recherché est rempli?

if(!document.getElementById("id_"+n).value){

//-- l'adresse pas de alt reconnu

if(document.getElementById("id_"+n).name == 'adresse'){

erreur += document.getElementById("id_"+n).name+"\n";

}else{

erreur += document.getElementById("id_"+n).alt;
erreur+="\n";

}
}

Les cases à cocher peuvent être cochées ou décochées, si nous avons 4

cases et que nous testons ces 4 cases en incrémentant une variable à
chaque case testée et non cochée nous saurons si au moins une case a été
cochée. L'inverse est bien entendu possible.

for(z=0;z<4;z++){

//-- test sur la valeur

if(document.form1.id_13[z].checked == false){
//on incrémente
crxNum++;
}
}

//si toutes les cases sont cochées ce n'est pas bon

if(crxNum == 4){
erreur+= "Une case au moins devrait être cochée\n";
}

javaScript demandes Stéphane Jeanneau © 2008 page n° 4

La liste

Elle fonctionne un peu sur le même mode que les tableaux des radios mais
c'est l'élément option qui est ici comme paramètre.

document.form1.id_14.options[0].selected == true

Nous allons créer une variable d'erreur spécifique pour ne pas avoir à vider la
variable erreur des éventuels messages qu'elle contiendrait déjà.
Cette variable d'erreur spécifique sera remplie avec une erreur le cas échéant
ou elle sera vidée. On ajoutera son contenu à la variable d'erreur globale.

La liste id_14 commence à 1 pour ne pas prendre le 1er élément en

considération.

for(z=1;z<4;z++){

//l'un des 3 menus est sélectionné?

if(document.form1.id_14.options[z].selected == true){

erreurLst = "";
//si l'un est sélectionné on arrête la boucle
break;

}else{

//non sélectionné

erreurLst = "Un choix devrait être fait dans la liste.\n";

}
}
//on ajoute les éventuelles erreurs
erreur+=erreurLst;

Il ne reste plus qu'à placer notre validation de formulaire à la fin de la

fonction.

if(erreur){

alert( erreur );
return document.okGo = false;

}else{
return document.okGo = true;
}

javaScript demandes Stéphane Jeanneau © 2008 page n° 5

Un illogisme perdure dans ce formulaire, seule une femme mariée posséde un
nom de jeune fille, le fait de cocher mademoiselle ou monsieur doit donc
dispenser de remplir le nom de jeune de fille.

Dans le formulaire ce champ est déjà placé dans un div avec un id : jf

de plus il porte l'id id_1, il est donc testé au début de la boucle.

<div class="divBoxLoc" id="jf">

<input name="nomJeuneFille" type="text" class="boxTxtFormLoc" id="id_1"
alt="le Nom de JF"/>
Nom de jeune fille
</div>

Cela va nous permettre de masquer ce champ en utilisant la classe masque

de la CSS. Cette classe masque contient une propriété display:none ce qui va
masquer le div. Cela ne suffira pas tout à fait puisque la boucle
for(n=1;n<13;n++){...} démarre à 1 et va donc systématiquement tester le
premier champ du formulaire. Pour éviter cela il suffit de déclarer une variable
dont la valeur sera modifiée en fonction du choix opéré sur les boutons
radios. Si madame est coché on teste le champ jeune fille donc on part de 1
sinon on part de 2 c'est à dire le champ suivant.

Cette variable va être déclarée dès le début du javaScript puis intégrée dans
un fonction spécifique au boutons radio ainsi que dans la boucle for() en place
du n=1.

departCheck = 1;

function coche(valeur){
if(valeur == "madame"){
//affichage du div
document.getElementById("jf").className = "divBoxLoc";
//on part de 1
departCheck = 1;
}else{
//masquage du div
document.getElementById("jf").className = "masque";
//on part de 2
departCheck = 2;
}
}

Dans la fonction verif() :

for(n=departCheck;n<13;n++){...}

javaScript demandes Stéphane Jeanneau © 2008 page n° 6

Le formulaire complet

<script language="JavaScript" type="text/javascript">

departCheck = 1;

function coche(valeur){
if(valeur == "madame"){
document.getElementById("jf").className = "divBoxLoc";
departCheck = 1;
}else{
document.getElementById("jf").className = "masque";
departCheck = 2;
}
}

function checkRemplissage(){

//initialisation des variables

erreur = "";

//la boucle pour les radios

for(z=0;z<3;z++){

//l'un des 3 radios est coché?

if(document.form1.id_0[z].checked == true){
erreur = "";
//si l'un est coché on arrête la boucle
break;
}else{
//non coché
erreur = "Civilité n'est pas coché.\n";

}
}
//la boucle sur les éléments du formulaire sauf le premier

for(n=departCheck;n<=12;n++){

//est-ce que l'élément recherché est rempli?

if(!document.getElementById("id_"+n).value){

//-- l'adresse pas de alt reconnu

if(document.getElementById("id_"+n).name == 'adresse'){

erreur += document.getElementById("id_"+n).name+"\n";

}else{

erreur += document.getElementById("id_"+n).alt;
erreur+="\n";

}
}

javaScript demandes Stéphane Jeanneau © 2008 page n° 7

 } //--fin boucle for

//les cases à cocher

crxNum = 0;
for(z=0;z<4;z++){

//-- test sur la valeur

if(document.form1.id_13[z].checked == false){
crxNum++;
}
}

//si toutes les cases sont cochées ce n'est pas bon

if(crxNum == 4){
erreur+= "Une case au moins devrait être cochée\n";
}

//La liste id_14 commence à 1 donc pas avec le 1er élément à zéro 0

for(z=1;z<4;z++){

//l'un des 3 menus est sélectionné?

if(document.form1.id_14.options[z].selected == true){

erreurLst = "";
//si l'un est sélectionné on arrête la boucle
break;
}else{
//non sélectionné
erreurLst = "Un choix au moins devrait être fait dans la liste.\n";

}
}
//on ajoute les éventuelles erreurs
erreur+= erreurLst;

if(erreur){
alert(erreur );
//option d'écriture dans la page en place d'alert
document.getElementById("affichageErreurs").innerHTML = erreur;
//cela implique qu'un div affichageErreurs soit présent dans la page
return document.okGo = false;

}else{
return document.okGo = true;
}
}
</script>

//indication du script sur l'un des boutons radio

<input name="id_0" type="radio" id="id_0" value="madame"

onclick="coche('madame');" />

javaScript demandes Stéphane Jeanneau © 2008 page n° 8