Vérification formulaire impossible [Résolu]

sam86 · 03/06/2011, 09h35

Bonjour à tous,

Je suis en train de faire une petite application html qui référence les livres d'une bibliothèque privée. J'ai une page "référence des livres" qui se compose entre autre de boutons radio pour choisir le genre du livre et d'un champ texte pour entrer le genre s'il est autre que ceux listés. Lorsque je vérifie à l'aide de JavaScript si l'utilisateur a bien rempli les champs de saisie et coché l'un des boutons radio avant de valider, quand on appuie sur "submit" le formulaire ne se valide pas (il renvoie sans cesse la boite d'alerte de vérification), uniquement lorsque le genre a été entré par le champ de saisie (si entré par bouton radio, le formulaire se valide).
Cela fait 3 jours que je cherche sur Internet et que j'essaie de faire tous les codes possibles et imaginables, mais la validation ne fonctionne toujours pas, et la console d'erreurs ne me renvoie rien.
Je vous soumets le code de ma page. Quelqu'un pourrait-il me dire ce qui ne va pas ?

Voici le code de vérification des boutons et du champ :

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
25
26
27
 
<script type="text/javascript" >
/*Teste les boutons radio :*/
function verifRadio()
{
   var radio=document.formulaire1.genre;
   var champ=document.formulaire1.autre_genre;
   var rlength=radio.length;
   var oui=false;
   for (var z=0; z<rlength; z++)
   {
      if (radio[z].checked && champ!='')
      {
         oui=true;
       }
   }
   if (oui)
   {
      return true;
   }
   else
   {
      window.alert("Vous n'avez pas indiqué le genre du livre");
      return false;
   }
}
</script>

Et voici le code de la page html correspondante :

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
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page enregistrement</title>
 
<link rel="stylesheet" type="text/css" href="./styles.css">
 
<script type="text/javascript" >
/*Teste les champs de saisie texte :*/
function test()
{
   var ok=0;
   if (document.formulaire1.titre.value=='')
   {
      document.formulaire1.titre.value=prompt('Veuillez remplir le champ "Titre" :');
      ok=1;
    }
    if (document.formulaire1.auteur.value=='')
    {
       document.formulaire1.auteur.value=prompt('Veuillez remplir le champ "Auteur" :');
	ok=1;
    }
    if (document.formulaire1.editeur.value=='')
    {	
       document.formulaire1.editeur.value=prompt('Veuillez remplir le champ "Editeur" :');
       ok=1;
     }
     if (document.formulaire1.genre.value=='')
     {
	 document.formulaire1.genre.value=prompt('Veuillez remplir le champ "Genre" :');
	 ok=1;
     }
     if (ok==0)
     {
	return true;
      }
      else
      {
	 return false;
       }
    }	
</script>
 
<script type="text/javascript" >
/*Teste les boutons radio :*/
function verifRadio()
{
   var radio=document.formulaire1.genre;
   var champ=document.formulaire1.autre_genre;
   var rlength=radio.length;
   var oui=false;
   for (var z=0; z<rlength; z++)
   {
      if (radio[z].checked && champ!='')
      {
	 oui=true;
       }
   }
   if (oui)
   {
      return true;
   }
   else
   {
      window.alert("Vous n'avez pas indiqué le genre du livre");
      return false;
   }
}
</script>
</head>
 
<body>
  <div>
     <form method="post" action="" name="formulaire1" onsubmit="return verifRadio();">
	<table class="table_form" cellpadding="0" cellspacing="0">
	   <caption class="gros_titre">Nouveau livre</caption>
	   <tr>
	     <td>
	       <fieldset>
		 <legend class="texte_fieldset">Références du livre</legend>
		  <table border="0" cellpadding="0" cellspacing="10">
		     <tr>                
		       <td class="legende"><label for="titre">Titre&nbsp;:&nbsp;</label></td>
		       <td><input name="titre" id="titre" type="text" size="40" class="champ"></td>
		    </tr>
 
		    <tr>
		      <td class="legende"><label for="auteur">Auteur&nbsp;:&nbsp;</label></td>
		      <td><input name="auteur" id="auteur" type="text" size="30" class="champ"></td>
		     </tr>
 
		     <tr>
			<td class="legende"><label for="editeur">&Eacute;diteur&nbsp;:&nbsp;</label></td>
			<td><input name="editeur" id="editeur" type="text" size="30" class="champ"></td>
		     </tr>
                     <tr>
                        <td height="5"></td>								
		     </tr>
		     <tr>
			<td><input type="reset" name="reset" value="   Recommencer   " class="bouton_simple"></td>
		     </tr>
		    </table>		
		  </fieldset>
 
		  <fieldset>
		    <legend class="texte_fieldset">Genre</legend>
		     <table border="0" cellpadding="0" cellspacing="0">
		       <tr>
			 <td>
			   <input type="radio" name="genre" id="roman" value="roman"><label for="roman" class="legende">Roman</label><br>
			   <input type="radio" name="genre" id="informatique" value="informatique"><label for="informatique" class="legende">Informatique</label><br>
			   <input type="radio" name="genre" id="sante" value="sante"><label for="sante" class="legende">Sant&eacute;</label><br>
			   <input type="radio" name="genre" id="spiritualite" value="spiritualite"><label for="spiritualite" class="legende">Spiritualit&eacute;</label><br>
			   <input type="radio" name="genre" id="cuisine" value="cuisine"><label for="cuisine" class="legende">Cuisine</label><br>
			   <input type="radio" name="genre" id="bricolage" value="bricolage"><label for="bricolage" class="bricolage">Bricolage</label><br>
			   <input type="radio" name="genre" id="nature" value="nature"><label for="nature" class="legende">Nature</label><br>
			   <input type="radio" name="genre" id="photo" value="photo"><label for="photo" class="legende">Photo</label><br>
			   <input type="radio" name="genre" id="bd" value="bd"><label for="bd" class="legende">Bande dessin&eacute;e</label><br>
			 </td>
		       </tr>
                       <tr>
                         <td>&nbsp;</td>							
		       </tr>
 
		       <tr>
			 <td class="legende">
			    <label for="autre_genre">Autre genre :&nbsp;</label><input type="text" name="autre_genre" id="autre_genre" size="30" class="champ">
			  </td>
			</tr>							
		      </table>
		    </fieldset>
 
		    <fieldset>
			<legend class="texte_fieldset">Fiche résumé</legend>
			<textarea name="resume" id="resume" rows="20" cols="110" class="champ">Faites ici un court résumé de votre livre</textarea>				
		    </fieldset>	
		  </td>
		</tr>	
 
		<tr>	
		   <td>
		      <input type="reset" name="reset" value="  Tout recommencer  " class="bouton_simple2">
		      <input type="submit" name="submit" value="   Valider   " class="bouton_simple" onclick="test();">
		   </td>		
		</tr>	
	     </table>
	  </form>
	</div>
</body>
</html>

Je vous remercie d'avance pour votre aide, car je n'y arrive pas seul.

Loceka · 03/06/2011, 10h08

Citation:

Envoyé par sam86

Lorsque je vérifie à l'aide de JavaScript si l'utilisateur a bien rempli les champs de saisie et coché l'un des boutons radio avant de valider, quand on appuie sur "submit" le formulaire ne se valide pas (il renvoie sans cesse la boite d'alerte de vérification), uniquement lorsque le genre a été entré par le champ de saisie (si entré par bouton radio, le formulaire se valide).

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
25
26
27
 
<script type="text/javascript" >
/*Teste les boutons radio :*/
function verifRadio()
{
   var radio=document.formulaire1.genre;
   var champ=document.formulaire1.autre_genre;
   var rlength=radio.length;
   var oui=false;
   for (var z=0; z<rlength; z++)
   {
      if (radio[z].checked && champ!='')
      {
         oui=true;
       }
   }
   if (oui)
   {
      return true;
   }
   else
   {
      window.alert("Vous n'avez pas indiqué le genre du livre");
      return false;
   }
}
</script>

C'est un peu normal vu que c'est ce que tu lui demandes de faire.

Essaye ça :

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
function verifRadio()
{
   var radio=document.formulaire1.getgenre;
   var champ=document.formulaire1.autre_genre[0];
   var rlength=radio.length;
   var oui=false;
   for (var z=0; z<rlength; z++)
   {
      if (radio[z].checked || champ!='')
      {
         oui=true;
       }
   }
   if (oui)
   {
      return true;
   }
   else
   {
      window.alert("Vous n'avez pas indiqué le genre du livre");
      return false;
   }
}

sam86 · 03/06/2011, 11h00

Merci Loceka de m'avoir répondu. Malheureusement, ça ne marche pas plus. En faisant un copié/collé de ton code, le test des boutons radio ne s'effectue plus et le formulaire est automatiquement validé (ce que je ne veux pas tant que je ne suis pas sûr que tous les champs sont remplis), et la console d'erreurs me met que "radio" est "undefined" (?). Si je modifie ton code et que j'enlève "get" dans "getgenre", la console ne me renvoie plus d'erreur, mais le test sur les boutons radio ne s'effectue toujours pas (idem ce que j'ai dit plus haut).
Peux-tu encore m'aider ? Merci beaucoup.

Loceka · 03/06/2011, 11h33

Essaye avec ces variables-là :

Code :

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

1
2
   var radio=document.getElementsByName("genre");
   var champ=document.getElementsByName("autre_genre")[0];

andry.aime · 03/06/2011, 11h41

Bonjour,

Citation:

var oui=false;

Ok,
1- tu as plusieurs éléments avec le name "genre", donc

Citation:

var radio=document.formulaire1.getgenre;

est un array.
2- Tu n'as qu'un seul élément avec le name "autre_genre" donc ce n'est pas un array (pas de length)

Citation:

var champ=document.formulaire1.autre_genre

A+.

andry.aime · 03/06/2011, 12h09

Après revérification avec l'ancien code de Loceka

Citation:

var radio=document.formulaire1.getgenre;

Il n'y a pas d'élément avec le name "getgenre" d'où l'undefined.

Code :

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

var radio=document.formulaire1.genre;

retourne un array d'éléments.

A+.

sam86 · 03/06/2011, 12h09

Citation:

Envoyé par Loceka

Essaye avec ces variables-là :

Code :

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

1
2
   var radio=document.getElementsByName("genre");
   var champ=document.getElementsByName("autre_genre")[0];

J'ai fait ce que tu m'as dit, et le test des boutons radio et du champ de saisie ne s'effectue pas. J'ai donc modifié ton code car comme dit andry les boutons radio sont un tableau, mais le champ de saisie est unique. J'ai donc mis [0] à "genre" et pas à "autre_genre". Résultat : le test des boutons radio s'effectue, mais du coup le formulaire ne se valide plus (à chaque clic sur "submit" ça me relance ma boite d'alerte "Veuillez indiquer le genre"). J'ai essayé de mettre "getElementById('autre_genre')", mais ça ne change rien non plus.

Une autre idée ? Merci beaucoup d'essayer de m'aider.

andry.aime · 03/06/2011, 12h12

Peut-on voir ton code à présent ?

A+.

andry.aime · 03/06/2011, 12h36

Tu ne dois pas tester les radio button et le champ dans une même condition if.

sam86 · 03/06/2011, 12h47

Désolé, j'ai eu un petit souci de clé usb.

Citation:

Envoyé par andry.aime

Peut-on voir ton code à présent ?

A+.

Bien sûr.
Voici le code du test de vérification :

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
25
26
27
 
<script type="text/javascript" >
	/*Teste les boutons radio :*/
	function verifRadio()
	{
		var radio=document.getElementsByName("genre")[0];
		var champ=document.getElementById("autre_genre");
		var rlength=radio.length;
		var oui=false;
		for (var z=0; z<rlength; z++)
		{
			if (radio[z].checked || champ!='')
			{
				oui=true;
			}
		}
		if (oui)
		{
			return true;
		}
		else
		{
			window.alert("Vous n'avez pas indiqué le genre du livre");
			return false;
		}
	}
</script>

Et celui de la page html :

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
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page enregistrement</title>
 
<link rel="stylesheet" type="text/css" href="./styles.css">
 
<script type="text/javascript" >
	/*Teste les champs de saisie texte :*/
	function test()
		{
			var ok=0;
			if (document.formulaire1.titre.value=='')
			{
				document.formulaire1.titre.value=prompt('Veuillez remplir le champ "Titre" :');
				ok=1;
			}
				if (document.formulaire1.auteur.value=='')
			{
				document.formulaire1.auteur.value=prompt('Veuillez remplir le champ "Auteur" :');
				ok=1;
			}
			if (document.formulaire1.editeur.value=='')
			{
				document.formulaire1.editeur.value=prompt('Veuillez remplir le champ "Editeur" :');
				ok=1;
			}
			if (document.formulaire1.genre.value=='')
			{
				document.formulaire1.genre.value=prompt('Veuillez remplir le champ "Genre" :');
				ok=1;
			}
			if (ok==0)
			{
				return true;
			}
			else
			{
				return false;
			}
		}	
</script>
 
 
<script type="text/javascript" >
	/*Teste les boutons radio :*/
	function verifRadio()
	{
		var radio=document.getElementsByName("genre")[0];
		var champ=document.getElementById("autre_genre");
		var rlength=radio.length;
		var oui=false;
		for (var z=0; z<rlength; z++)
		{
			if (radio[z].checked || champ!='')
			{
				oui=true;
			}
		}
		if (oui)
		{
			return true;
		}
		else
		{
			window.alert("Vous n'avez pas indiqué le genre du livre");
			return false;
		}
	}
</script>
</head>
<body>
	<div>
	<form method="post" action="" name="formulaire1" onsubmit="return verifRadio();">
	<table class="table_form" cellpadding="0" cellspacing="0">
	<caption class="gros_titre">Nouveau livre</caption>
		<tr>
			<td>
				<fieldset>
					<legend class="texte_fieldset">Références du livre</legend>
						<table border="0" cellpadding="0" cellspacing="10">
								<tr>
 
									<td class="legende"><label for="titre">Titre&nbsp;:&nbsp;</label></td>
									<td><input name="titre" id="titre" type="text" size="40" class="champ"></td>
								</tr>
 
								<tr>
									<td class="legende"><label for="auteur">Auteur&nbsp;:&nbsp;</label></td>
									<td><input name="auteur" id="auteur" type="text" size="30" class="champ"></td>
								</tr>
 
								<tr>
									<td class="legende"><label for="editeur">&Eacute;diteur&nbsp;:&nbsp;</label></td>
									<td><input name="editeur" id="editeur" type="text" size="30" class="champ"></td>
								</tr>
								<tr>
									<td height="5">&nbsp;</td>								
								</tr>
								<tr>
									<td><input type="reset" name="reset" value="   Recommencer   " class="bouton_simple"></td>
								</tr>
							</table>		
				</fieldset>
 
				<fieldset>
					<legend class="texte_fieldset">Genre</legend>
						<table border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td>
								<input type="radio" name="genre" id="roman" value="roman"><label for="roman" class="legende">Roman</label><br>
								<input type="radio" name="genre" id="informatique" value="informatique"><label for="informatique" class="legende">Informatique</label><br>
								<input type="radio" name="genre" id="sante" value="sante"><label for="sante" class="legende">Sant&eacute;</label><br>
								<input type="radio" name="genre" id="spiritualite" value="spiritualite"><label for="spiritualite" class="legende">Spiritualit&eacute;</label><br>
								<input type="radio" name="genre" id="cuisine" value="cuisine"><label for="cuisine" class="legende">Cuisine</label><br>
								<input type="radio" name="genre" id="bricolage" value="bricolage"><label for="bricolage" class="bricolage">Bricolage</label><br>
								<input type="radio" name="genre" id="nature" value="nature"><label for="nature" class="legende">Nature</label><br>
								<input type="radio" name="genre" id="photo" value="photo"><label for="photo" class="legende">Photo</label><br>
								<input type="radio" name="genre" id="bd" value="bd"><label for="bd" class="legende">Bande dessin&eacute;e</label><br>
								</td>
							</tr>
 
							<tr>
								<td>&nbsp;</td>							
							</tr>
 
							<tr>
								<td class="legende">
									<label for="autre_genre">Autre genre :&nbsp;</label><input type="text" name="autre_genre" id="autre_genre" size="30" class="champ">
								</td>							
 
						</table>
				</fieldset>
			</td>
		</tr>	
 
		</tr>	
			<td>
			<input type="reset" name="reset" value="  Tout recommencer  " class="bouton_simple2">
			<input type="submit" name="submit" value="   Valider   " class="bouton_simple" onclick="test();">
			</td>		
		<tr>	
	</table>
	</form>
	</div>
</body>
</html>

Mais je ne vois pas comment faire pour tester mon champ de saisie ?

andry.aime · 03/06/2011, 12h56

Si c'est pour testé si l'utilisateur a au moins sélectionné un radio ou remplit le champs

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
	function verifRadio()
	{
		var radio=document.getElementsByName("genre");
		var champ=document.getElementById("autre_genre");
		if(champ.value != ""){
			return true;
		}
		for (var z=0; z<radio.length; z++)
		{
			if (radio[z].checked)
			{
				return true;
			}
		}
		window.alert("Vous n'avez pas indiqué le genre du livre");
		return false;
	}

A+.

sam86 · 03/06/2011, 13h21

Un grand merci andry, tu me sauves la vie : ÇA MARCHE !!!
Je n'y serais jamais arrivé seul, depuis 4 jours que je galère dessus. Merci encore de t'être penché sur mon cas.

03/06/2011, 11h00	#3
sam86 Invité de passage Inscription : juin 2011 Messages : 13 Détails du profil Informations personnelles : Localisation : France Informations forums : Inscription : juin 2011 Messages : 13 Points : 0 Points : 0	Test vérification boutons radio ne fonctionne pas Merci Loceka de m'avoir répondu. Malheureusement, ça ne marche pas plus. En faisant un copié/collé de ton code, le test des boutons radio ne s'effectue plus et le formulaire est automatiquement validé (ce que je ne veux pas tant que je ne suis pas sûr que tous les champs sont remplis), et la console d'erreurs me met que "radio" est "undefined" (?). Si je modifie ton code et que j'enlève "get" dans "getgenre", la console ne me renvoie plus d'erreur, mais le test sur les boutons radio ne s'effectue toujours pas (idem ce que j'ai dit plus haut). Peux-tu encore m'aider ? Merci beaucoup.
	00

03/06/2011, 12h12	#8
andry.aime Rédacteur/Modérateur Andry Aimé Inscription : septembre 2007 Messages : 5 128 Détails du profil Informations personnelles : Nom : Andry Aimé Localisation : Ile Maurice Informations forums : Inscription : septembre 2007 Messages : 5 128 Points : 7 270 Points : 7 270	Peut-on voir ton code à présent ? A+.
	00

03/06/2011, 12h36	#9
andry.aime Rédacteur/Modérateur Andry Aimé Inscription : septembre 2007 Messages : 5 128 Détails du profil Informations personnelles : Nom : Andry Aimé Localisation : Ile Maurice Informations forums : Inscription : septembre 2007 Messages : 5 128 Points : 7 270 Points : 7 270	Tu ne dois pas tester les radio button et le champ dans une même condition if.
	00

03/06/2011, 13h21	#12
sam86 Invité de passage Inscription : juin 2011 Messages : 13 Détails du profil Informations personnelles : Localisation : France Informations forums : Inscription : juin 2011 Messages : 13 Points : 0 Points : 0	Un grand merci andry, tu me sauves la vie : ÇA MARCHE !!! Je n'y serais jamais arrivé seul, depuis 4 jours que je galère dessus. Merci encore de t'être penché sur mon cas.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email