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().

**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.

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

**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.

bloquer submit en javascript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager