événement onsubmit sur un formulaire.

**pidlas** · 16/06/2010, 12h43

Bonjour,

Cela fait plusieurs heures que je tourne en rond et que je n'arrive pas à comprendre pourquoi mon code ne s'exécute pas comme je le souhaite. J'ai un formulaire avec une fonction de validation des champs en js que j'appelle sur un bouton de type submit. Normalement il ne devrait pas lancer la méthode action de mon formulaire tant que certains sont vides. Et bien il le fait. J'ai vraiment besoin d'un regard extérieur pour m'aider car je ne vois plus rien et tout me semble correct. Or,

Voici ma page html :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<title>Formulaire de saisie</title><!-- titre du site et de la page --> 
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" media="screen" type="text/css" href="formdvd.css" />
	<script type="text/javascript" src="formdvdtheque.js"></script>
 </head>
<body onload="document.forms['saisiedvd'].elements['titre'].focus()">
<div id="page">
	<div id="affiche"><div id="laregle"><img src="image/laregledujeusanstitre.jpg" alt="Le trèfle" /></div></div><!-- une image positionnée en absolu -->
	<div id="en_tete"><div id="labanniere"><img src="image/banniere.jpg" alt="Le bandeau" /></div></div>
	<h2>Saisie de la DVDthèque</h2>
	<div id="corps">
		<p id="premier_element"></p>
		<form method="post" action="saisiebase.php" id="saisiedvd" onsubmit="return verifform(this)" onreset="return reaffiche();">
		<p>
			<label for="titre">Titre du film :</label>
			<input type="text" name="titre" size="50" maxlength ="50" id="titre" onblur="veriftitre(this);" />
		</p>
		<p>
			<label for="realisateur">Réalisateur :</label>
			<input type="text" name="realisateur" size="50" maxlength="50" id="realisateur" onblur="verifreal(this);" />
		</p>
		<p>
			<label for="annee">Année :</label>
			<input type="text" name="annee" size="4" maxlength="4" id="annee" onblur="verifan(this);" />
		</p>
		<p>
			Avez-vous aimé ?<br />
			<input type="radio" name="ava" size="" id="oui" value="" checked="checked" />
			<label for="oui">Oui</label>
			<input type="radio" name="ava" size="" id="non" value="" />
			<label for="non">Non</label>
			<input type="radio" name="ava" size="" id="bof" value="" />
			<label for="bof">Bof !</label><br />
		</p>
		<p>
			<label for="avis">Votre avis sur le film :</label><br />
			<textarea name="avis" id="avis" rows="3" cols="50" onfocus="this.value='';">Vos commentaires ici</textarea>
		</p>
		<p>
			<label for="pseudo">Votre pseudo :</label>
			<input type="text" name="pseudo" size="20" maxlength="20" id="pseudo" onblur="verifpseudo(this;)" />
		</p>
		<p id="validation">
			<input type="submit" value="Envoyer" />
			<input type="reset" value="Annuler" />
		</p>
		</form>
		<p id="dernier_element"></p>
	</div>
	<div id="pied_de_page">
		<p> Conçu et réalisé par Philippe Idlas. 2010.<br />
		N'hésitez pas à <a href="mailto:idlas.philippe@neuf.fr">me contacter</a> si vous voulez un avis plus personnel sur un film en particulier !</p>
	</div>    
</div>
</body>
</html>

**SpaceFrog** · 16/06/2010, 12h56

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onsubmit="return verifform(this)"

mais encore ... ??

**dukej** · 16/06/2010, 14h23

tu as tout simplement une erreur dans ton code JS, et donc ton formulaire se retrouve envoyé, la solution pour tester ton javascript est de bloquer le action.

Pour ça en général je met simplement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<form action="javascript:;">

si je veux tester que l'envoi s'effectue bien je mets un console.log si j'ai firebug

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<form action="javascript:console.log('form envoyé');">

une fois que tu as finis et que tu es OK tu remets l'ancien action

**SpaceFrog** · 16/06/2010, 14h30

+1 duke mais là on n'a pas vus une virgule du script de verifacation

**javatwister** · 16/06/2010, 15h20

Envoyé par pidlas

Bonjour,
J'ai vraiment besoin d'un regard extérieur

euh... j'ai beau regarder

**SpaceFrog** · 16/06/2010, 15h21

ben regarde dehors

**javatwister** · 16/06/2010, 15h27

the cars hiss by my window...
but I miss the point of view

**pidlas** · 17/06/2010, 10h07

Bonjour,

Voici donc mon script de vérification :

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
 
function surligne(champ, erreur){
	if(erreur) champ.style.backgroundColor = "#fba";
	else champ.style.backgroundColor = "";
}
 
function veriftitre(champ){
	if((champ.value.length == '') || (champ.value.length > 50)){
		surligne(champ, true);
		return false;
	}
	else{
		surligne(champ, false);
		return true;
	}
}
 
function verifreal(champ){
	if((champ.value.length == '') || (champ.value.length > 50)){
		surligne(champ, true);
		return false;
	}
	else{
		surligne(champ, false);
		return true;
	}
}
 
function verifan(champ){
	if((champ.value.length !=4) || (champ.value < 1900) || (champ.value > 2010)){
		surligne(champ, true);
		return false;
	}
	else{
		surligne(champ, false);
		return true;
	}
}
 
function verifpseudo(champ){
	if((champ.value.length < 5) || (champ.value.length > 20)){
		surligne(champ, true);
		return false;
	}
	else{
		surligne(champ, false);
		return true;
	}
}
 
function verifform(f){
   var titreok = veriftitre(f.titre);
	var realok = verifreal(f.realisateur);
	var anok = verifan(f.annee);
	var avaok = verifava(f.ava);
	var pseudook = verifpseudo(f.pseudo);
 
   if(titreok && realok && anok && avaok && pseudook){
		return true;
	}
   else
   {
      alert("Veuillez remplir correctement tous les champs");
      return false;
   }
}
 
function reaffiche(){
	window.open("formdvdtheque.php");
}

**vermine** · 17/06/2010, 13h54

Bonjour,

Ce qui est en rouge est de trop:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

((champ.value.length == '')

**SpaceFrog** · 17/06/2010, 14h01

ou alors

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

==0

**pidlas** · 17/06/2010, 14h35

Envoyé par SpaceFrog

ou alors

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

==0

Merci pour cela.

Par contre j'ai tj le même pb. A savoir le formulaire est envoyé même si tous les champs ne sont pas remplis.

**SpaceFrog** · 17/06/2010, 14h37

même si tous les champs ne sont pas remplis

ben si tu les testais tous ...

**pidlas** · 17/06/2010, 14h46

Envoyé par dukej

tu as tout simplement une erreur dans ton code JS, et donc ton formulaire se retrouve envoyé, la solution pour tester ton javascript est de bloquer le action.

Pour ça en général je met simplement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<form action="javascript:;">

si je veux tester que l'envoi s'effectue bien je mets un console.log si j'ai firebug

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<form action="javascript:console.log('form envoyé');">

une fois que tu as finis et que tu es OK tu remets l'ancien action

Bien. J'ai donc remplacé le lien dans action et le formulaire est bien envoyé alors que tous les champs ne sont pas remplis.

Dans la console de Firebug apparait bien le message 'form envoyé'. Ne maitrisant pas Firebug je ne vois pas comment faire pour l'utiliser à trouver mon bug.

Merci pour vos conseils pour me sortir de ce problème.

**pidlas** · 17/06/2010, 14h56

Envoyé par SpaceFrog

ben si tu les testais tous ...

Merci pour ta réponse.
C ce que je fais. Je teste tous les champs sur un onblur et ensuite je valide le formulaire sur un onsubmit. J'expérimente plusieurs pbs. D'abord je n'arrive pas à faire fonctionner le focus(). Je m'explique : dans mon js, si le champ titre est vide, je change la couleur du fond et je redonne le focus à ce champ. Eh bien, si je pousse TAB sans mettre un titre le fond change bien de couleur MAIS le focus est passé au champ suivant (en l'occurence réalisateur). Ensuite, deuxième pb, si je pousse sur le bouton envoyer de type submit, le formulaire est envoyé même si les champs sont vide alors que je teste spécifiquement cela dans le onsubmit en testant la valeur true ou false des champs. Voilà mes deux pbs qui m'empêchent d'avancer dans mon petit dév.

**vermine** · 17/06/2010, 14h58

Vute fais bien fait j'ai vu ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 onblur="verifpseudo(this;)

**SpaceFrog** · 17/06/2010, 15h01

ha en effet ...
super lourd une fonction pour chaque ..
pourquoi ne pas tou faire en une seule fonction ?
un peu de lecture :
http://www.developpez.net/forums/d55...on-formulaire/

entre deux teste ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
function verifform(f){
   var titreok = veriftitre(f.titre);
 alert(titreok)
	var realok = verifreal(f.realisateur);
 alert(realok)
	var anok = verifan(f.annee);
 alert(anok)	
        var avaok = verifava(f.ava);
 alert(avak)
	var pseudook = verifpseudo(f.pseudo);