Discussion :

[Jeannotc]

Bonjour tout le monde,
Je me bagarre depuis quelque temps avec une fonction de vérification d'un formulaire.
Cette fonction ne me renvoie pas les manques des champs qui doivent être renseignés et m'envoie sur la page suivante avec les erreurs bien sur !
Voici le script

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function verif()
{
var nberreur=0;
var texterreur="";
var inputList=document.forms['identi'].elements;
for (unInput in inputList)
{
var x = document.forms['identi'].elements[unImput];
if (x.value==0 || x.value =='' || x.value==false)
{
texterreur+= "Le champ "+ x.name "+n\'a pas été rempli \n";
nberreur++;
}
}
if (nberreur != 0)
{
alert(texterreur);
return false;
}
else
{
return true;
}
}

et le code html issu de firebug puisque le tout est en php

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<div id="formulea">
<form id="ident" onsubmit="return verif(this)" action="validear.php" method="POST" name="identi">
<input type="hidden" value="4 726,00" name="prix">
<font size="4" face="Verdana" color="#800000"> Liste des passagers </font>
<br>
<div id="formulec" class="td_formule">
<fieldset style="border: ridge #0033FF">
<legend align="top">Adultes</legend>
<input id="civila" type="checkbox" value="Mr" name="civil[]">
<label>Monsieur</label>
<input id="civila" type="checkbox" value="Mme" name="civil[]">
<label>Madame</label>
<label> Nom : </label>
<input id="nompas" type="text" size="15" value="" name="pasnom[]">
<label> Prénom : </label>
<input id="pnompas" type="text" size="15" value="" name="pasprenom[]">
<label> Date de naissance : </label>
<input id="naispas" type="text" size="10" value="" name="pasnais[]">
JJ/MM/AAAA
<br>
</fieldset>
<br>
<font size="4" face="Verdana" color="#800000"> Vos coordonnées </font>
<br>
<div id="identite" class="td_formule">
<fieldset style="border: ridge #0033FF">
<legend align="top">Votre identité</legend>
<input id="civilc" type="checkbox" value="Mr" name="civili">
<label>Monsieur</label>
<br>
<input id="civilc" type="checkbox" value="Mme" name="civili">
<label>Madame</label>
<br>
<label> Votre nom : </label>
<br>
<input id="coodnom" type="text" value="" size="15" name="nomcood">
<br>
<label> Votre prénom : </label>
<br>
<input id="coodpnom " type="text" value="" size="15" name="pnomcood">
<br>
<label>Numéro, rue ou lieu-dit : </label>
<br>
<input id="coodrue'" type="text" value="" size="30" name="rue">
<br>
<label> Ville : </label>
<br>
<input id="coodville" type="text" value="" size="25" name="villeco">
<br>
<label> Code postal: </label>
<br>
<input id="coodpos" type="text" value="" size="5" name="codepost">
<br>
<label> Adresse mail valide : </label>
<br>
<input id="coodmail" type="text" value="" size="30" name="courie">
</fieldset>
</div>
</div>
</form>
</div>
<table width="1000" align="center">
<tbody>
<tr>
<td align="center">
<input type="submit" value="VALIDEZ VOTRE COMMANDE">
</td>
</tr>
</tbody>
</table>

Petites explications complémentaires concernant la partie Adultes.
Je ne sais pas à l'avance combien d'adultes il y aura puisque le nombre a été indiqué dans la page précédente.
Je pourrai également avoir d'autres groupes d'inscrite (Enfants, personnes âgées) qui ne figurent pas dans cet exemple de code généré.

Alors si quelqu'un pouvait me donner un coup de main, cela serait sympa.
Je précise que j'ai fait de multiples tentatives avec des scripts différents pris (comme celui-ci d'ailleurs) sur des réponses données à d'anciennes questions sur le sujet, ou des scripts de ma création mais que je ne suis arrivé à rien !
Un grand merci par avance

[Barsy]

Plusieurs erreurs dans ton code :

- Il faut que ton submit soit dans ton form.
- Dans la ligne ""Le champ " + x.name "+n\'a pas été rempli \n";" il y a une inversion entre le guillemet et le +
- Tu as écrit unImput au lieu de unInput

Ça devrait être bon je crois

[Jeannotc]

Merci pour ces bons conseils, comme quoi plusieurs paires d'yeux sont parfois très utiles.
Mais il reste encore quelques problèmes à résoudre :
Pourquoi me met-il 3 fois le même champs qui n'est pas renseigné
Il ne prends pas en compte les champs Checkbox dans les erreurs !

[Barsy]

Tu devrais utiliser des radiobutton plutôt que des checkbox pour les champs de sélection. Sinon, cela veut dire que l'on peut être à la fois Monsieur et Madame.

le code suivant permettrai dans ton cas de tester les radiobutton

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
function verif()
{
	var nberreur=0;
	var texterreur="";
	var inputList=document.forms['identi'].elements;
	var isChecked;
	var lastRadioName = "";
	for (unInput in inputList)
	{
		var x = document.forms['identi'].elements[unInput];
		if (x.type == "radio" && lastRadioName != x.name)
		{
			lastRadioName = x.name;
			isChecked = false;
			for (var i = 0; i < document.forms['identi'][x.name].length; i++)
			{
				if (document.forms['identi'][x.name][i].checked)
				{
					isChecked = true;
					break;
				}
			}
			if (!isChecked)
			{
				texterreur+= "Le champ "+ x.name + "n\'a pas été rempli \n";
				nberreur++;
			}
		}
		else if (x.value == 0 || x.value =='' || x.value==false)
		{
			texterreur+= "Le champ "+ x.name + "n\'a pas été rempli \n";
			nberreur++;
		}
	}
	if (nberreur != 0)
	{
		alert(texterreur);
		return false;
	}
	else
	{
		return true;
	}
}

il suffit de remplacer type="checkbox" par type="radio".

Par contre, une remarque, en HTML il ne faut pas utiliser le même id pour deux éléments différents.

[Jeannotc]

Bonjour,

Cela marche bien si je n'ai qu'une personne par catégorie (Adulte, enfant, personne âgée)
Mais ne donne pas les erreurs pour les autres.
Je parle naturellement des checkbox ! parce que pour les text ça fonctionne pour tous

[Barsy]

Il ne faut pas donner le même "name" à plusieurs radiobutton qui serait dans des groupes différents. Sinon, tu ne pourras sélectionner qu'un seul d'entre eux sur toute ta page.
Par contre les radiobutton d'un même groupe doivent avoit le même name.

C'est à dire que le name doit être "civilAdulte[]", "civilEnfant[]"...

[Jeannotc]

Merci de te pencher sur mon cas !

Les names ont des noms différents pour chaque groupe et les id aussi.
Il n'y a pas de bouton pour les enfants, puisque ce n'est pas utile.
Pour les adultes c'est Civil[] et pour les personnes âgées c'est civila[]
Pour les id c'est la même chose

[Jeannotc]

Bonjour,
J'ai volontairement voulu envoyer le formulaire sans avoir rempli un seul champ et voilà le message d'erreur généré :

Pour les catégories :
Il y avait 2 adultes, 2 enfants et 2 personnes âgées

Le champ Mr ou Mme (Adulte) n'a pas été rempli
Le champ Nom passager(Adulte) n'a pas été rempli
Le champ Prénom passager(Adulte) n'a pas été rempli
Le champ Date de naissance(Adulte) n'a pas été rempli
Le champ Nom passager(Adulte) n'a pas été rempli
Le champ Prénom passager(Adulte) n'a pas été rempli
Le champ Date de naissance(Adulte) n'a pas été rempli
Le champ Nom (Enfant) n'a pas été rempli
Le champ Prénom (Enfant) n'a pas été rempli
Le champ Date de naissance(Enfant) n'a pas été rempli
Le champ Nom (Enfant) n'a pas été rempli
Le champ Prénom (Enfant) n'a pas été rempli
Le champ Date de naissance(Enfant) n'a pas été rempli
Le champ n'a pas été rempli
Le champ Mr ou Mme (Personnes agées) n'a pas été rempli
Le champ Nom passager(Personne âgée) n'a pas été rempli
Le champ Prénom passager(Personne âgée) n'a pas été rempli
Le champ Date de naissance(Personne âgée) n'a pas été rempli
Le champ n'a pas été rempli
Le champ Mr ou Mme (Personnes agées) n'a pas été rempli
Le champ Nom passager(Personne âgée) n'a pas été rempli
Le champ Prénom passager(Personne âgée) n'a pas été rempli
Le champ Date de naissance(Personne âgée) n'a pas été rempli

Celle-ci concerne l'identité du posteur

Le champ Mr ou Mme (Vous) n'a pas été rempli
Le champ Votre nom n'a pas été rempli
Le champ Votre prénom n'a pas été rempli
Le champ Numéro, Rue ou lieu-dit n'a pas été rempli
Le champ Votre ville n'a pas été rempli
Le champ Votre Code postal n'a pas été rempli
Le champ Votre Mail n'a pas été rempli
Le champ Votre Code postal n'a pas été rempli
Le champ Votre prénom n'a pas été rempli
Le champ Votre prénom n'a pas été rempli
Le champ Votre Mail n'a pas été rempli
Le champ Votre Mail n'a pas été rempli
Le champ Numéro, Rue ou lieu-dit n'a pas été rempli
Le champ Votre Code postal n'a pas été rempli
Le champ Numéro, Rue ou lieu-dit n'a pas été rempli
Le champ Votre ville n'a pas été rempli
Le champ Votre nom n'a pas été rempli
Le champ Votre nom n'a pas été rempli
Le champ Votre ville n'a pas été rempli

A mon avis, la boucle se fait une fois de trop pour les rubriques adultes etc...!
et ne devrait se faire qu'une fois pour le posteur puisqu'il ne peut y en avoir qu'un.
Alors il faudrait peut-être faire 2 fonctions, une pour la première partie pour les adultes etc...
et une pour le posteur !
Une fois la première boucle achevée, appeler la 2ème fonction pour la seconde partie du formulaire.

Alors je cherche la solution !

[Barsy]

Il faudrait que tu me remettes le code (Javascript + HTML) pour voir s'il y a une erreur.
En essayant de mon côté avec ce que j'ai posté ci-dessus, je n'ai aucun problème.

[Jeannotc]

Bonjour,
voici le script :

Code Javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 
<script type="text/javascript">
function verif()
{
var nberreur=0;
var texterreur="";
var inputList=document.forms['ident'].elements;
var isChecked;
var lastRadioName = "";
var nomid="";
for (unInput in inputList)
{
var x = document.forms['ident'].elements[unInput];
if (x.type == "checkbox" && lastRadioName != x.id)
{
lastRadioName = x.id;
isChecked = false;
for (var i = 0; i < document.forms['ident'][x.id].length; i++)
{
if (document.forms['ident'][x.id][i].checked)
{
isChecked = true;
break;
}
}
if (!isChecked)
{
if (x.id=='civila')nomid="Mr ou Mme (Adulte)";
if (x.id=='civilag')nomid="Mr ou Mme (Personnes agées)";
if (x.id=='civilc')nomid="Mr ou Mme (Vous)";
texterreur+= "Le champ "+ nomid + " n\'a pas été rempli \n";
nberreur++;
nomid="";
}
}
else if (x.value ==0 || x.value =='' || x.value==false)
{
if (x.id=='nompas')nomid="Nom passager(Adulte)";
if (x.id=='pnompas')nomid="Prénom passager(Adulte)";
if (x.id=='naispas')nomid="Date de naissance(Adulte)";
if (x.id=='nomenf')nomid="Nom (Enfant)";
if (x.id=='pnomenf')nomid="Prénom (Enfant)";
if (x.id=='naisenf')nomid="Date de naissance(Enfant)";
if (x.id=='nompasag')nomid="Nom passager(Personne âgée)";
if (x.id=='pnompasag')nomid="Prénom passager(Personne âgée)";
if (x.id=='naispasag')nomid="Date de naissance(Personne âgée)";
if (x.id=='coodnom')nomid="Votre nom";
if (x.id=='coodpnom')nomid="Votre prénom";
if (x.id=='coodrue')nomid="Numéro, Rue ou lieu-dit";
if (x.id=='coodville')nomid="Votre ville";
if (x.id=='coodpos')nomid="Votre Code postal";
if (x.id=='coodmail')nomid="Votre Mail";
if (nomid == "")
{
texterreur+= "Le champ "+ x.id + " n\'a pas été rempli \n";
}
else
{
texterreur+= "Le champ "+ nomid + " n\'a pas été rempli \n";
}
nberreur++;
nomid="";
}
}
if (nberreur != 0)
{
alert(texterreur);
return false;
}
else
{
return true;
}
}
</script>

et le html généré :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
 
<div id="formulea">
<form id="ident" onsubmit="return verif(this)" action="validear.php" method="POST" name="identi">
<input type="hidden" value="23 346,44" name="prix">
<font size="4" face="Verdana" color="#800000"> Liste des passagers </font>
<br>
<div id="formulec" class="td_formule">
<fieldset style="border: ridge #0033FF">
<legend align="top">Adultes</legend>
<input id="civila" type="checkbox" value="Mr" name="civil[]">
<label>Monsieur</label>
<input id="civila" type="checkbox" value="Mme" name="civil[]">
<label>Madame</label>
<label> Nom : </label>
<input id="nompas" type="text" size="15" value="" name="pasnom[]">
<label> Prénom : </label>
<input id="pnompas" type="text" size="15" value="" name="pasprenom[]">
<label> Date de naissance : </label>
<input id="naispas" type="text" size="10" value="" name="pasnais[]">
JJ/MM/AAAA
<br>
<input id="civila" type="checkbox" value="Mr" name="civil[]">
<label>Monsieur</label>
<input id="civila" type="checkbox" value="Mme" name="civil[]">
<label>Madame</label>
<label> Nom : </label>
<input id="nompas" type="text" size="15" value="" name="pasnom[]">
<label> Prénom : </label>
<input id="pnompas" type="text" size="15" value="" name="pasprenom[]">
<label> Date de naissance : </label>
<input id="naispas" type="text" size="10" value="" name="pasnais[]">
JJ/MM/AAAA
<br>
</fieldset>
<fieldset style="border: ridge #0033FF">
<legend align="top">Enfants</legend>
<label> Nom : </label>
<input id="nomenf" type="text" size="15" value="" name="enfnom[]">
<label> Prénom : </label>
<input id="pnomenf" type="text" size="15" value="" name="enfpnom[]">
<label> Date de naissance : </label>
<input id="naisenf" type="text" size="10" value="" name="enfnais[]">
JJ/MM/AAAA
<br>
<label> Nom : </label>
<input id="nomenf" type="text" size="15" value="" name="enfnom[]">
<label> Prénom : </label>
<input id="pnomenf" type="text" size="15" value="" name="enfpnom[]">
<label> Date de naissance : </label>
<input id="naisenf" type="text" size="10" value="" name="enfnais[]">
JJ/MM/AAAA
<br>
</fieldset>
<fieldset style="border: ridge #0033FF">
<legend align="top">Personnes agées</legend>
<input id="civilag'" type="checkbox" value="Mr" name="civila[]">
<label>Monsieur</label>
<input id="civilag" type="checkbox" value="Mme" name="civila[]">
<label>Madame : </label>
<label> Nom : </label>
<input id="nompasag" type="text" size="15" value="" name="pasnoma[]">
<label> Prénom : </label>
<input id="pnompasag" type="text" size="15" value="" name="pasprenoma[]">
<label> Date de naissance : </label>
<input id="naispasag" type="text" size="10" value="" name="pasnaisa[]">
JJ/MM/AAAA
<br>
<input id="civilag'" type="checkbox" value="Mr" name="civila[]">
<label>Monsieur</label>
<input id="civilag" type="checkbox" value="Mme" name="civila[]">
<label>Madame : </label>
<label> Nom : </label>
<input id="nompasag" type="text" size="15" value="" name="pasnoma[]">
<label> Prénom : </label>
<input id="pnompasag" type="text" size="15" value="" name="pasprenoma[]">
<label> Date de naissance : </label>
<input id="naispasag" type="text" size="10" value="" name="pasnaisa[]">
JJ/MM/AAAA
<br>
</fieldset>
<br>
<font size="4" face="Verdana" color="#800000"> Vos coordonnées </font>
<br>
<div id="identite" class="td_formule">
<fieldset style="border: ridge #0033FF">
<legend align="top">Votre identité</legend>
<input id="civilc" type="checkbox" value="Mr" name="civili">
<label>Monsieur</label>
<br>
<input id="civilc" type="checkbox" value="Mme" name="civili">
<label>Madame</label>
<br>
<label> Votre nom : </label>
<br>
<input id="coodnom" type="text" value="" size="15" name="nomcood">
<br>
<label> Votre prénom : </label>
<br>
<input id="coodpnom" type="text" value="" size="15" name="pnomcood">
<br>
<label>Numéro, rue ou lieu-dit : </label>
<br>
<input id="coodrue" type="text" value="" size="30" name="rue">
<br>
<label> Ville : </label>
<br>
<input id="coodville" type="text" value="" size="25" name="villeco">
<br>
<label> Code postal: </label>
<br>
<input id="coodpos" type="text" value="" size="5" name="codepost">
<br>
<label> Adresse mail valide : </label>
<br>
<input id="coodmail" type="text" value="" size="30" name="courie">
</fieldset>
</div>
</div>
<input type="submit" value="VALIDEZ VOTRE COMMANDE">
</form>
</div>

J'ai quelque peu modifié le script en prenant les id plutôt que les name pour être plus précis dans les messages d'erreurs, mais avec l'un ou l'autre le résultat est le même.


Edit :
J'ai remis le script en name à la place des id ça passe mieux, le seul petit soucis c'est que si l'on ne rempli pas un champ dans la partie Posteur, l'erreur s'affiche autant de fois qu'il y a d'adultes, d'enfants, ou de personnes âgées.

[Barsy]

Je t'ai conseillé d'utiliser des bouton radio au lieu de checkbox. Dans ton formulaire, on peut à la fois cocher M et Mme.

Cela dit, le code que j'ai mis ci-dessus et que tu as réutilisé fonctionne aussi avec des checkbox.

Le problème, c'est que tu as des attributs "name" semblables entre les groupes de checkbox. Par exemple "civil[]" ou "civila[]" qui apparait dans plusieurs groupes.

Autre remarque, il ne faut pas que plusieurs éléments aient le même attribut "id". C'est interdit en HTML. Et dans ton code, ça arrive souvent.

[Jeannotc]

Merci de ton aide,
Si j'ai choisi les checkbox à la place des bouton radio c'est qu'avec les boutons radios, s'il y avait plusieurs personnes appartenant au même groupe (adultes, enfants etc..) je ne pouvais cocher la case que pour 1 personne, lorsque je cliquais sur le bouton de la 2ème personne, cela supprimait le clic sur le 1er.

Il est logique que tu trouves plusieurs id et name identiques puisque les champs sont créés par une boucle en fonction du nombre d'inscrits dans chaque catégorie.

Le code que je t'ai mis est issu de firebug puisqu'il est écrit en PHP et que l'on ne doit pas mettre de code PHP. Comme j'avais entré 2 personnes par catégorie tu as donc plusieurs fois les même names et les mêmes id!
Mais comment faire autrement ?

[Barsy]

Merci de ton aide,
Si j'ai choisi les checkbox à la place des bouton radio c'est qu'avec les boutons radios, s'il y avait plusieurs personnes appartenant au même groupe (adultes, enfants etc..) je ne pouvais cocher la case que pour 1 personne, lorsque je cliquais sur le bouton de la 2ème personne, cela supprimait le clic sur le 1er.

Normal étant donné que tu as plusieurs radio avec le même name dans des groupes différents.

Il est logique que tu trouves plusieurs id et name identiques puisque les champs sont créés par une boucle en fonction du nombre d'inscrits dans chaque catégorie.

Le code que je t'ai mis est issu de firebug puisqu'il est écrit en PHP et que l'on ne doit pas mettre de code PHP. Comme j'avais entré 2 personnes par catégorie tu as donc plusieurs fois les même names et les mêmes id!
Mais comment faire autrement ?

En modifiant le php pour qu'il produise une page HTML propre. Ce n'est pas parce que le HMTL est généré qu'il ne doit pas répondre aux normes.

Je ne pourrai pas faire grand chose de plus pour toi. Le code Javascript fonctionne bien et je t'ai donné les raisons pour lesquelles ta page HTML n'est pas conforme. Il faudra que tu ailles poster sur la partie PHP du forum si tu as des soucis de ce côté là.

[Jeannotc]

Un grand merci pour toute l'aide que tu m'as apporté.
Pour le moment, tout à l'air de fonctionner correctement, mais je vais me pencher sur le côté php de la chose pour essayer de trouver le remède adéquat.
Encore merci à à bientôt peut-être !
En attendant, je mets le résolu pour le côté javascript !