bloquer submit en javascript

Version imprimable

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:

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

14/03/2011, 11h16
Loceka

Parce que ta fonction verification() ne retourne rien.
14/03/2011, 11h20
djdelarue

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

et c'est le seul moment qui m'interesse pour interdire l'envoi
14/03/2011, 11h34
Loceka

Nope, c'est ta fonction onreadystatechange qui renvoie false, pas la fonction verification().
14/03/2011, 11h38
Bovino
Citation:

Envoy� par djdelarue

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

:nono:
Comme l'indique ton code
Code:

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.
14/03/2011, 11h39
djdelarue

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
14/03/2011, 11h41
Bovino

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.

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:

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:

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>

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

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

14/03/2011, 11h47
djdelarue

le formulaire est quand meme envoy� vu que c'est de l'asynchrone :cry:

Ah ben oui mais dans ce cas faut attendre la r�ponse ! :P
Code:

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.

14/03/2011, 11h55
djdelarue
faudrait pas plutot faire sa?
Code:

1 2 3 4 if(checkFinished==true) { return canSubmit; }
Parce que j'envoi encore meme si erreur actuellement la :s
14/03/2011, 11h56
Loceka
Citation:
Envoy� par djdelarue

faudrait pas plutot faire sa?

Code:

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.
14/03/2011, 11h57
djdelarue

effectivement oui, mince ton id�e �tait pas mal mais elle fonctionne pas non plus :s
14/03/2011, 11h59
Loceka

Elle devrait pourtant. :koi:

Fais voir ton code ?

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

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

14/03/2011, 12h02
Loceka
Tu n'as pas d�clar� la variable canSubmit :
Code:

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.
14/03/2011, 12h04
djdelarue

effectivement belle erreur de ma part...
Malheuresement �a veux toujours pas :s
14/03/2011, 12h14
Bovino

Si c'est pour attendre la r�ponse du serveur, autant utiliser un appel synchrone :aie:
14/03/2011, 12h16
djdelarue

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

Ben en fait, c'est plus simple :aie:
Dans la mesure o� le script attend la r�ponse du serveur, tu n'as plus � g�rer le callback :

Code:

1
2
3
4
5
6
7
8
9
10
11
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);
var test = xhr.responseText;
if (test==1){
	document.getElementById('connect').innerHTML = '<font color=red>Pseudo ou mot de passe incorrect</font>';
	return false;
}

15/03/2011, 09h55
djdelarue
pour ceux que sa interesse probl�me enfin resolu c'est la fin de mon calvere ^^

en faite je suis retourner avec un input de type button et j'ai utiliser cette fonction en JS
Code:

1 2 3 4 5 6 7 function v(e) { var enterpressed = e? e.which == 13: window.event.keyCode == 13; if (enterpressed){ verification(); return false; } }
qui s'appelle a chaque saisie de touche
15/03/2011, 10h22
Loceka

La solution de Bovino ne fonctionnait pas ?

Ecouter la touche entr�e alors qu'il existe un �l�ment HTML (input submit) qui est fonctionnellement plus appropri� est tr�s dommage je trouve et �a nuit � la maintenance.

Citation:

Envoy� par Loceka

La solution de Bovino ne fonctionnait pas ?

Bah non parce si son id�e de d�part (faire une requ�te synchrone) �tait bonne, cela ne s'est pas traduit dans le code car pour ce faire il aurait fallu mettre false en troisi�me argument du xhr.open.

Donc :

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
function 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;
		}
 
 
	var xhr = getXhr();
 
	xhr.open("POST","verif.php",false);
	// 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);
 
	var test = xhr.responseText;
 
	if (test==1)
		{
			document.getElementById('connect').innerHTML = '<font color=red>Pseudo ou mot de passe incorrect</font>';
			return false;
		}
		else
			return true;
}

Code:

<form action="accueil.php" method="post" onsubmit="return verif()" >

@djdelarue ta solution bloque totalement l'envoi du formulaire si JS est d�sactiv�, alors que celle-ci permet de s'affranchir de cette contrainte.