Vérification formulaire impossible

**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

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

**sam86** · 03/06/2011, 12h09

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.