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

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

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.