fonction de validation de form

Version imprimable

Bonjour, je suis en train de cr�er une fonction en javascript qui v�rifie simplement si certains sont champs sont vides et dans ce cas affiche un message mais si elle n'affiche pas, alors �a valide mais le probl�me est que �a valide mais avant d'utiliser cette fonction javascript, j'utilisais des r�cup�rations en php.

Avant, j'allais sur une autre page et je r�cup�rai les valeurs de mes variables et si une d'entre elle �tait vide, alors j'affichais un message pour le signaler.

Pour v�rifier ma fonction javascript, je teste en ne mettant rien, j'ai bien le message qui s'affiche puis je teste
en remplissant mes champs, je valide mais j'ai quand m�me un message php qui me signale que mes champs sont vides donc je voudrais savoir comment �a se fait?

Voici mon code:
fonction javascript
Code:

1 2 3 4 5 6 7 8 9 function verif_champs() { if( (document.deposer.titre.value == '') || (document.deposer.contenu.value == '') || (document.deposer.photo.value == '') || (document.deposer.prix.value == '') ) { alert("Veuillez remplir tout les champs."); return false; }else return true; }
code 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 <FORM method="post" action="traitementAnnonce.php?traitement=1" enctype="text/plain" name="deposer" onSubmit="return verif_champs();"> <fieldset class="tableauDeposeAnnonce"> <legend>Déposer une annonce</legend> <table> <tr> <th class="celulleDeposeAnnonce">Titre : </th> <td><input type=text name="titre"></td> </tr> <tr> <th class="celulleDeposeAnnonce">Contenu : </th> <td><TEXTAREA rows="3" cols="40" name="contenu"></TEXTAREA></td> </tr> <tr> <th class="celulleDeposeAnnonce">Photo : </th> <td><input type=file name="photo"></td> </tr> <tr> <th class="celulleDeposeAnnonce">Prix : </th> <td><input type=text name="prix"></td> </tr> <tr> <th class="celulleDeposeAnnonce">Catégorie : </th> <td><SELECT name="categorie"> <?php $categorie = retourneCategorie2(); echo $categorie; ?> </SELECT></td> </tr> </table> <input type=submit name="Déposer"> </fieldset> </FORM>
R�cup�ration:
Code:

1 2 3 4 5 $titre = $_POST['titre']; $contenu = $_POST['contenu']; $photo = $_POST['photo']; $prix = $_POST['prix'];

14/03/2010, 17h44
SpaceFrog

deux remarques:
pourquoi faire une s�rie de || ?
il serait plus lisible de passer par des if ... ou un switch

utilise une syntaxe plus rigoureuse pour mettre la main sur les elements du form

Code:

document.froms('nomduform'].elements['nomelement'].value
14/03/2010, 17h52
absot
J'ai fais une s�rie de || pour dire que si une seule des conditions est vrai, il affiche le message d'erreur.

Si je remplace ma syntaxe par la tienne � savoir:
Code:

1 2 document.froms['deposer'].elements['titre'].value == ''
Et que je ne mets rien, je n'ai pas mon message d'erreur qui appara�t, comment �a se fait?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function verif_champs() {
var compt=0
if (document.forms['deposer'].elements['titre'].value == ''){compt++;}
if (document.forms['deposer'].elements['contenu'].value == ''){compt++;}
if (document.forms['deposer'].elements['photo'].value == ''){compt++;}
if (document.forms['deposer'].elements['prix'].value == ''){compt++;}
if(compt>0)
{
	alert("Veuillez remplir tout les champs.");
	return false;
}else
	return true;
}

Ca ne fonctionne pas, pourtant je pense avoir tout bien respect�..

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
 
function verif_champs() 
{
	var compt = 0;
	if ( document.froms['deposer'].elements['titre'].value == '' )
	{
		compt ++;
	} 
	if ( document.froms['deposer'].elements['contenu'].value == '' )
	{
		compt ++;
	} 
	if ( document.froms['deposer'].elements['photo'].value == '' )
	{
		compt ++;
	} 
	if ( document.froms['deposer'].elements['prix'].value == '' )
	{
		compt ++;
	} 
 
	if ( compt>0 )
	{
		alert("Veuillez remplir tout les champs.");
		return false;
	}else
	{
		return true;
	}
}

Qu'est-ce qui ne va pas?

14/03/2010, 18h29
SpaceFrog

ta balise table fait ecran ..
soit tu vires la balise form [edit] :cfou: balise table voulais-je dire... [/edit]qui soit dit en passant ne doit pas servir � faire de la mise en page ...
soit tu mets des id sur les input et tu les appelles par leur id
14/03/2010, 18h40
absot

Je ne peux pas virer ma balise FORM vu que je m'en sers pour transmettre mes variables..?

Je ne comprends pas ce que tu veux dire avec les input?

Je viens de tester ceci qui fonctionne parfaitement

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<script type="text/javascript">
function verif_champs() {
var compt=0
if (document.forms['deposer'].elements['titre'].value == ''){compt++;}
if (document.forms['deposer'].elements['contenu'].value == ''){compt++;}
if (document.forms['deposer'].elements['photo'].value == ''){compt++;}
if (document.forms['deposer'].elements['prix'].value == ''){compt++;}
if(compt>0)
{
	alert("Veuillez remplir tout les champs.");
	return false;
}else
	return true;
}
 
</script>
</head>
 
<body>
<FORM method="post" action="javascript:alert('envoyé')" enctype="text/plain" name="deposer" onSubmit="return verif_champs();">
 
<fieldset class="tableauDeposeAnnonce">
<legend>D&eacute;poser une annonce</legend>
<table>
	<tr>
		<th class="celulleDeposeAnnonce">Titre : </th>
		<td><input type=text name="titre"></td>
	</tr>
	<tr>
		<th class="celulleDeposeAnnonce">Contenu : </th>
		<td><TEXTAREA rows="3" cols="40" name="contenu"></TEXTAREA></td>
	</tr>	
	<tr>
		<th class="celulleDeposeAnnonce">Photo : </th>
		<td><input type=file name="photo"></td>
	</tr>	
	<tr>	
		<th class="celulleDeposeAnnonce">Prix : </th>
		<td><input type=text name="prix"></td>
	</tr>
	<tr>	
		<th class="celulleDeposeAnnonce">Cat&eacute;gorie : </th>
		<td><SELECT name="categorie">
			</SELECT></td>
	</tr>
</table>
<input type=submit value="Déposer">
</fieldset>
</FORM>
 
</body>
 
</html>

Tu oublies de mettre un ; quand tu d�clares ta variables compt

C'est bizarre que �a fonctionne chez toi mais pas chez moi.. :cry:

Je remets tout mon code au cas o�:

code 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
 
<script src="javascript/script.js" language="javascript" type="text/javascript"></script>
 
<FORM method="post" action="traitementAnnonce.php?traitement=1" enctype="text/plain" name="deposer" onSubmit="return verif_champs();">
 
<fieldset class="tableauDeposeAnnonce">
<legend>D&eacute;poser une annonce</legend>
<table>
	<tr>
		<th class="celulleDeposeAnnonce">Titre : </th>
		<td><input type=text name="titre"></td>
	</tr>
	<tr>
		<th class="celulleDeposeAnnonce">Contenu : </th>
		<td><TEXTAREA rows="3" cols="40" name="contenu"></TEXTAREA></td>
	</tr>	
	<tr>
		<th class="celulleDeposeAnnonce">Photo : </th>
		<td><input type=file name="photo"></td>
	</tr>	
	<tr>	
		<th class="celulleDeposeAnnonce">Prix : </th>
		<td><input type=text name="prix"></td>
	</tr>
	<tr>	
		<th class="celulleDeposeAnnonce">Cat&eacute;gorie : </th>
		<td><SELECT name="categorie">
			<?php
                        $categorie = retourneCategorie2();
                        echo $categorie;
                        ?>
			</SELECT></td>
	</tr>
</table>
<input type=submit name="D&eacute;poser">
</fieldset>
</FORM>

script.js

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
 
function verif_champs() 
{
	var compt = 0;
	if ( document.froms['deposer'].elements['titre'].value == '' )
	{
		compt ++;
	} 
	if ( document.froms['deposer'].elements['contenu'].value == '' )
	{
		compt ++;
	} 
	if ( document.froms['deposer'].elements['photo'].value == '' )
	{
		compt ++;
	} 
	if ( document.froms['deposer'].elements['prix'].value == '' )
	{
		compt ++;
	} 
 
	if ( compt>0 )
	{
		alert("Veuillez remplir tout les champs.");
		return false;
	}else
	{
		return true;
	}
}

R�cup�ration des donn�es

Code:

1
2
3
4
5
 
$titre = $_POST['titre'];
$contenu = $_POST['contenu'];
$photo = $_POST['photo'];
$prix = $_POST['prix'];

14/03/2010, 18h53
SpaceFrog

Citation:

Tu oublies de mettre un ; quand tu d�clares ta variables compt

Non les ; sont facultatifs
il ne sont attendus que dans certains cas de syntaxes bien precis
14/03/2010, 19h03
absot
Je viens de r�gler un probl�me, je n'avais pas de message d'erreur parce j'avais mis la condition
Code:

1 2 document.froms['deposer'].elements['titre'].value == ''
au lieu de
Code:

1 2 document.forms['deposer'].elements['titre'].value == ''
:aie:

Donc maintenant le message s'affiche bien quand il le faut mais mon dernier probl�me est quand je remplie mon formulaire, je le valide mais ma page de traitement ne r�cup�re aucune donn�e..

Sans le javascript, il les r�cup�re mais depuis que je l'ai mis, il ne le fait plus, il faut changer quelque chose?
14/03/2010, 19h42
SpaceFrog

:oops:
meaculpa, c'est moi qui t'ai induit en erreur plus haut avec cette faute de frappe ...
14/03/2010, 19h59
absot

Ce n'est pas grave, �a m'a fait cherch� ;)

Par contre, comment �a se fait que je ne puisse plus r�cup�rer mes donn�es avec mes $_POST?
14/03/2010, 20h17
SpaceFrog

que te retourne un

Code:

var_dump($_POST)

??
14/03/2010, 20h33
absot
Ca me retourne un:
Code:

1 2 array(0) {}
15/03/2010, 08h22
SpaceFrog

peut �tre est cette fois ci la balise table qui masque les �l�ments du form ???
15/03/2010, 19h49
absot

Je ne comprends pas comment une balise table peut cacher les �l�ments du form?