Vérification formulaire impossible

Version imprimable

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:

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:

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.

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:

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. :P

Essaye ça :
Code:

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; } }

03/06/2011, 11h00
sam86

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.

Essaye avec ces variables-là :

Code:

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

03/06/2011, 11h41
andry.aime

Bonjour,

Citation:

var oui=false;

:mouarf:

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+.
03/06/2011, 12h09
andry.aime

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:

var radio=document.formulaire1.genre;

retourne un array d'éléments.

A+.
03/06/2011, 12h09
sam86
Citation:
Envoyé par Loceka

Essaye avec ces variables-là :

Code:

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.
03/06/2011, 12h12
andry.aime

Peut-on voir ton code à présent ?

A+.
03/06/2011, 12h36
andry.aime

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

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:

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:

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 ?

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

Code:

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+.

03/06/2011, 13h21
sam86

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.