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.