fonction de validation de form

[absot]

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

Récupération:

Code :

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

[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

[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?

[SpaceFrog]

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

[absot]

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?

[SpaceFrog]

ta balise table fait ecran ..
soit tu vires la balise form [edit] 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

[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?

[SpaceFrog]

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>

[absot]

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

C'est bizarre que ça fonctionne chez toi mais pas chez moi..

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

[SpaceFrog]

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

[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 == ''

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?

[SpaceFrog]

meaculpa, c'est moi qui t'ai induit en erreur plus haut avec cette faute de frappe ...

[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?

[SpaceFrog]

que te retourne un

Code :

var_dump($_POST)

??

[absot]

Ca me retourne un:

Code :

1
2
 
array(0) {}

[SpaceFrog]

peut être est cette fois ci la balise table qui masque les éléments du form ???

[absot]

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