bloquer submit en javascript

djdelarue · 14/03/2011, 11h06

Bonjour,

je dois avoir oublier un petit truc mais pas moyen de trouver et je me prend la tete depuis ce matin la dessus, je voudrais que mon formulaire ne s'envoi pas si erreur, voici mon code:

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
 
<script language="javascript">
function getXhr(){
	var xhr = null; 
	if (window.XMLHttpRequest)                 //  Objet de la fenêtre courant
	{ 
		xhr = new XMLHttpRequest();     //  Firefox, Safari, ...
	} 
	else 
	   if (window.ActiveXObject)                    //  Version Active
	   {
		  xhr = new ActiveXObject("Microsoft.XMLHTTP");   // Internet Explorer 
	   }
	return xhr;
}
 
function verification(){
	var xhr = getXhr();
	xhr.onreadystatechange=function() {
	// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200){
			test = xhr.responseText;
			if (test==1)
			{
				document.getElementById('connect').innerHTML = '<font color=red>Pseudo ou mot de passe incorrect</font>';
				return false;
			}
		}
	}
 
	xhr.open("POST","verif.php",true);
	// Ajouter si vous utiliser la méthode POST
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
	idpseudo = document.getElementById('pseudo').value;
	idMdp = document.getElementById('mdp').value;
	xhr.send("idPseudo="+idpseudo+"&idmdp="+idMdp);
}
</script>
</head>
<body onload="formulaire.pseudo.focus()">
 <div class="Wrapper">
	<div id="en_tete">
	</div>
<div id="corpsC">
<h1 align=center><font color="#0ebad6" face="Comic Sans MS">Connexion</h1>
<form method="post" name="formulaire" id="monForm" action="accueil.php" onSubmit="return verification();">
	<div id="connect"></div>
	<table>
		<tr><td>Pseudo:</td><td><input type="text" name="pseudo" id="pseudo" size="50" ></td></tr>
		<tr><td>Mot de passe:</td><td><input type="password" name="mdp" id="mdp" size="50"></td></tr>
	</table>
	<br>
	<input type="submit" name="connect2" id="connect2" value="Se Connecter">
	</form>
	</div>
	</div>
</body>
</html>

Je ne comprend pas pourquoi ça ne fonctionne pas

Loceka · 14/03/2011, 11h16

Parce que ta fonction verification() ne retourne rien.

djdelarue · 14/03/2011, 11h20

bah si elle retourne false dans le cas ou test==1

et c'est le seul moment qui m'interesse pour interdire l'envoi

Loceka · 14/03/2011, 11h34

Nope, c'est ta fonction onreadystatechange qui renvoie false, pas la fonction verification().

Bovino · 14/03/2011, 11h38

Citation:

Envoyé par djdelarue

bah si elle retourne false dans le cas ou test==1

Comme l'indique ton code

Code :

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

1
2
3
xhr.onreadystatechange=function() {
...
}

le return false s'applique à la fonction anonyme générée par onreadystatechange, pas à verification() qui elle ne retourne effectivement rien.

Ceci dit, tu t'y prends mal, dans le cas d'une requête asynchrone, la fonction verification() n'attend pas la réponse du serveur pour terminer son exécution et donc tu ne pouuras pas renvoyer la bonne valeur.
Tu devras t'y prendre autrement.

djdelarue · 14/03/2011, 11h39

daccord je comprend mais du coup comment faire là car je suis largué, il faut que je test mon onreadystatechange avant c'est pour ça :s

Edit: Oui justement c'est ce que je vois mais je ne vois pas trop comment faire la :s avec un bouton simple je n'aurais plus accès à la touche entree c'est ça mon probleme surtout

Bovino · 14/03/2011, 11h41

Par exemple, tu peux lancer la vérification sur un input de type button et non submit et si le résultat est bon, lancer le submit du formulaire.

djdelarue · 14/03/2011, 11h44

C'est ce que j'avais fait au tout début et ça fonctionnais parfaitement mais on m'a reproché le fait que la touche entree ne fonctionne pas et donc je me suis repenché sur le submit car avec le bouton j'avais réussi à faire fonctionner mon button mais j'avais un soucis dès que j'avais une erreur, je ne pouvais plus envoyer le formulaire

voici mon ancien code:

Javascript:

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
function test(){  
   if (window.event.keyCode == 13)  
		verif();
} 
function getXhr(){
	var xhr = null; 
	if (window.XMLHttpRequest)                 //  Objet de la fenêtre courant
	{ 
		xhr = new XMLHttpRequest();     //  Firefox, Safari, ...
	} 
	else 
	   if (window.ActiveXObject)                    //  Version Active
	   {
		  xhr = new ActiveXObject("Microsoft.XMLHTTP");   // Internet Explorer 
	   }
	return xhr;
}
 
function verif(){
	var xhr = getXhr();
	xhr.onreadystatechange=function() {
	// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200){
			test = xhr.responseText;
			if (test==1)
				document.getElementById('connect').innerHTML = '<font color=red>Pseudo ou mot de passe incorrect</font>';
			else
				document.formulaire.submit();
		}
	}
 
	xhr.open("POST","verif.php",true);
	// Ajouter si vous utiliser la méthode POST
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
	idpseudo = document.getElementById('pseudo').value;
	idMdp = document.getElementById('mdp').value;
	xhr.send("idPseudo="+idpseudo+"&idmdp="+idMdp);
}

HTML:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<form method="post" name="formulaire" id="monForm" action="accueil.php" onKeyPress="test()">
	<div id="connect"></div>
	<table>
		<tr><td>Pseudo:</td><td><input type="text" name="pseudo" id="pseudo" size="50" ></td></tr>
		<tr><td>Mot de passe:</td><td><input type="password" name="mdp" id="mdp" size="50"></td></tr>
	</table>
	<br>
	<input type="button" value="Se Connecter" onclick="verif()">
	</form>

Loceka · 14/03/2011, 11h45

Ou sinon ta fonction onreadystatechange renseigne un booléen déclaré en variable globale et c'est cette variable que tu testes :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var canSubmit = true;
 
function verification() {
  // ...
  xhr.onreadystatechange = function() {
    // ...
    if (test == 1) {
      canSubmit = false;
    }
    // ....
  }
  // ...
  return canSubmit;
}

djdelarue · 14/03/2011, 11h47

le formulaire est quand meme envoyé vu que c'est de l'asynchrone

Loceka · 14/03/2011, 11h51

Ah ben oui mais dans ce cas faut attendre la réponse !

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
var checkFinished = false;
function verification() {
  // ...
  xhr.onreadystatechange = function() {
    // ...
    if (test == 1) {
      canSubmit = false;
    }
    // ....
    checkFinished = true;
  }
  while (!checkFinished) {} // attente du résultat
  checkFinished = false; // reset du booléen pour quand on va rappeller le onsubmit.
  // ...
  return canSubmit;

EDIT :
Le mieux serait de faire un sleep dans la boucle while mais c'est pas implémenté de base en js. Par contre tu peux l'implémenter toi-même.

djdelarue · 14/03/2011, 11h55

faudrait pas plutot faire sa?

Code :

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

1
2
3
4
 
if(checkFinished==true) {
    return canSubmit;
}

Parce que j'envoi encore meme si erreur actuellement la :s

Loceka · 14/03/2011, 11h56

Citation:

Envoyé par djdelarue

faudrait pas plutot faire sa?

Code :

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

1
2
3
4
 
if(checkFinished==true) {
    return canSubmit;
}

Surtout pas !

Là tu n'attends pas que ta méthode finisses, tu vérifies juste si elle a fini. Donc la plupart du temps ce ne sera pas le cas.

djdelarue · 14/03/2011, 11h57

effectivement oui, mince ton idée était pas mal mais elle fonctionne pas non plus :s

Loceka · 14/03/2011, 11h59

Elle devrait pourtant.

Fais voir ton code ?

djdelarue · 14/03/2011, 12h00

j'ai du mal la saisir c'est possible je suis très tête en l'air...

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
 
var checkFinished = false;
 
function verification(){
	var xhr = getXhr();
	xhr.onreadystatechange=function() {
	// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200){
			test = xhr.responseText;
			if (test==1)
			{
				document.getElementById('connect').innerHTML = '<font color=red>Pseudo ou mot de passe incorrect</font>';
				 canSubmit = false;
			}
		}
		checkFinished = true;
	}
 
	xhr.open("POST","verif.php",true);
	// Ajouter si vous utiliser la méthode POST
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
	idpseudo = document.getElementById('pseudo').value;
	idMdp = document.getElementById('mdp').value;
	xhr.send("idPseudo="+idpseudo+"&idmdp="+idMdp);
	while (!checkFinished) {} // attente du résultat
	checkFinished = false; // reset du booléen pour quand on va rappeller le onsubmit.
 
	return canSubmit;
 
}

Loceka · 14/03/2011, 12h02

Tu n'as pas déclaré la variable canSubmit :

Code :

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

1
2
3
var canSubmit = true;
 
function ...

Du coup quand ta fonction onreadystatechange essaye de lui affecter "false", javascript plante, le reste du script n'est pas exécuté et ta page se valide.

djdelarue · 14/03/2011, 12h04

effectivement belle erreur de ma part...
Malheuresement ça veux toujours pas :s

Bovino · 14/03/2011, 12h14

Si c'est pour attendre la réponse du serveur, autant utiliser un appel synchrone

djdelarue · 14/03/2011, 12h16

lol pas faux
mais je suis trop largué là je me perd dans le code ^^

14/03/2011, 11h41	#7
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 805 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 805 Points : 35 807 Points : 35 807	Par exemple, tu peux lancer la vérification sur un input de type button et non submit et si le résultat est bon, lancer le submit du formulaire. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

14/03/2011, 12h14	#19
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 805 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 805 Points : 35 807 Points : 35 807	Si c'est pour attendre la réponse du serveur, autant utiliser un appel synchrone __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	10

14/03/2011, 11h16	#2
Loceka Membre Expert Tlouye Ci Inscription : mars 2004 Messages : 1 450 Détails du profil Informations personnelles : Nom : Tlouye Ci Informations forums : Inscription : mars 2004 Messages : 1 450 Points : 2 149 Points : 2 149	Parce que ta fonction verification() ne retourne rien.
	00

14/03/2011, 11h20	#3
djdelarue Invité de passage Inscription : juin 2010 Messages : 19 Détails du profil Informations forums : Inscription : juin 2010 Messages : 19 Points : 0 Points : 0	bah si elle retourne false dans le cas ou test==1 et c'est le seul moment qui m'interesse pour interdire l'envoi
	00

14/03/2011, 11h34	#4
Loceka Membre Expert Tlouye Ci Inscription : mars 2004 Messages : 1 450 Détails du profil Informations personnelles : Nom : Tlouye Ci Informations forums : Inscription : mars 2004 Messages : 1 450 Points : 2 149 Points : 2 149	Nope, c'est ta fonction onreadystatechange qui renvoie false, pas la fonction verification().
	00

14/03/2011, 11h39	#6
djdelarue Invité de passage Inscription : juin 2010 Messages : 19 Détails du profil Informations forums : Inscription : juin 2010 Messages : 19 Points : 0 Points : 0	daccord je comprend mais du coup comment faire là car je suis largué, il faut que je test mon onreadystatechange avant c'est pour ça :s Edit: Oui justement c'est ce que je vois mais je ne vois pas trop comment faire la :s avec un bouton simple je n'aurais plus accès à la touche entree c'est ça mon probleme surtout
	00

14/03/2011, 11h47	#10
djdelarue Invité de passage Inscription : juin 2010 Messages : 19 Détails du profil Informations forums : Inscription : juin 2010 Messages : 19 Points : 0 Points : 0	le formulaire est quand meme envoyé vu que c'est de l'asynchrone
	00

14/03/2011, 11h57	#14
djdelarue Invité de passage Inscription : juin 2010 Messages : 19 Détails du profil Informations forums : Inscription : juin 2010 Messages : 19 Points : 0 Points : 0	effectivement oui, mince ton idée était pas mal mais elle fonctionne pas non plus :s
	00

14/03/2011, 11h59	#15
Loceka Membre Expert Tlouye Ci Inscription : mars 2004 Messages : 1 450 Détails du profil Informations personnelles : Nom : Tlouye Ci Informations forums : Inscription : mars 2004 Messages : 1 450 Points : 2 149 Points : 2 149	Elle devrait pourtant. Fais voir ton code ?
	00

14/03/2011, 12h04	#18
djdelarue Invité de passage Inscription : juin 2010 Messages : 19 Détails du profil Informations forums : Inscription : juin 2010 Messages : 19 Points : 0 Points : 0	effectivement belle erreur de ma part... Malheuresement ça veux toujours pas :s
	00

14/03/2011, 12h16	#20
djdelarue Invité de passage Inscription : juin 2010 Messages : 19 Détails du profil Informations forums : Inscription : juin 2010 Messages : 19 Points : 0 Points : 0	lol pas faux mais je suis trop largué là je me perd dans le code ^^
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email