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?