[AJAX] Fonction qui exécute la validation d'un formulaire

Version imprimable

Bonjour,

J'espère poster au bon endroit (J'ai hésité entre javscript et ajax).

J'exécute la fonction ci-dessous lors de la validation d'un formulaire.

Code:

onsubmit="return valider_form()"

Quelques soit les infos du formulaire il m'affiche le message "oups" qui est la valeur par défaut du message.

Je n'arrive donc pas exécuter ou récupéré les infos de verif-form.php.

Pourriez-vous me dire ce qui ne va pas.

La fonction valider_form:

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
 
function valider_form(){
 
  var data = null;
  data = "prix_mini="+document.forms['rechercher'].elements['prix_mini'].value+"&prix_maxi="+document.forms['rechercher'].elements['prix_maxi'].value;
 
  var xhr_object = null;
  var lemessage = "oups";
 
   if(window.XMLHttpRequest) // Firefox
      xhr_object = new XMLHttpRequest();
   else if(window.ActiveXObject) // Internet Explorer
      xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
   else { // XMLHttpRequest non supporté par le navigateur
      alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
      return;
   }
 
   xhr_object.open("POST", "verif-form.php", true);
 
   xhr_object.onreadystatechange = function() {
      if(xhr_object.readyState == 4) {
         eval(xhr_object.responseText);		 		 
	  }
   }
 
  xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr_object.send(data);
 
  if(lemessage == "ok") {
	return true;
  }
  else {
	AffMessage('alerte_form',lemessage);
	return false;
  }
}

et le fichier verif-form.php:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?php
header('Content-type: text/html; charset=charset=utf-8');
 
if ($_POST["prix_mini"]>$_POST["prix_maxi"])
{
        echo 'lemessage="Prix mini doit etre inferieur a prix maxi"';
}
else
{
        echo 'lemessage="ok"';
}
?>

Merci d'avance pour votre aide.

Salut,

Tu écris:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 xhr_object.open("POST", "verif-form.php", true); xhr_object.onreadystatechange = function() { if(xhr_object.readyState == 4) { eval(xhr_object.responseText); } } xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //ICI C'EST ASYNCHRONE... xhr_object.send(data); //... DONC TU PASSES LA AVANT LE RETOUR DE TA REQUETE AJAX if(lemessage == "ok") { return true; } else { AffMessage('alerte_form',lemessage); return false; }
Or comme ta requête est asynchrone le code continue de s'exécuter avant d'obtenir le retour de ton script PHP. C'est d'ailleurs pour cette raison qu'on donne une fonction de rappel su onreadystatechange , sinon on ne pourrait exécuter de code au retour du script AJAX.

ERE

Merci pour ta réponse.

j'y avais pensé mais ayant le même résultat, je n'avais pas gardé cette version.
Ceci dit c'est vrai que c'est logique. (c'est mon premier script AJAX)

Mon code deviens 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 function valider_form(){ var data = null; data = "prix_mini="+document.forms['rechercher'].elements['prix_mini'].value+"&prix_maxi="+document.forms['rechercher'].elements['prix_maxi'].value; var xhr_object = null; var lemessage = "oups"; if(window.XMLHttpRequest) // Firefox xhr_object = new XMLHttpRequest(); else if(window.ActiveXObject) // Internet Explorer xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); else { // XMLHttpRequest non supporté par le navigateur alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); return; } xhr_object.open("POST", "include/verif-form.php", true); xhr_object.onreadystatechange = function() { if(xhr_object.readyState == 4) { eval(xhr_object.responseText); if(lemessage == "ok") { return true; } else { AffMessage('alerte_form',lemessage); return false; } } } xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr_object.send(data); }
Maintenant j'ai deux problème avec ce script :

1°) Le message apparait a l'écran et disparait aussitôt, ce qui n'étais pas le cas avec le code erroné précédent, je ne vois pas pourquoi.

2°) C'est toujours "oups" qui apparait, même en mettant dans verif-form.php uniquement ceci :
Code:

1 2 3 4 5 <?php header('Content-type: text/html; charset=charset=utf-8'); echo 'lemessage="ok"'; ?>
Je l'ai simplifié a ce point pour voir si c'étais mes données en post qui ne passaient pas. ma variable lemessage ne prend pas la valeur "ok".

Je ne vois plus quoi essayé, auriez-vous une idée.

Merci

J'ai codé une page qui fait ressortir mon problème. Si quelqu'un a le temps de la monter sur sa machine, ce serait cool, car je n'y comprends plus rien ou du moins je ne comprends pas les réactions.

La page html avec le js:

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
59
60
61
62
63
64
65
66
67
68
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test ajax</title>
 
<script type="text/javascript">
 
function valider_form(){
 
  var data = null;
  data = "prix_mini="+document.forms['rechercher'].elements['prix_mini'].value+"&prix_maxi="+document.forms['rechercher'].elements['prix_maxi'].value;
 
  var xhr_object = null;
  var lemessage = "oups";
 
   if(window.XMLHttpRequest) // Firefox
      xhr_object = new XMLHttpRequest();
   else if(window.ActiveXObject) // Internet Explorer
      xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
   else { // XMLHttpRequest non supporté par le navigateur
      alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
      return;
   }
 
   xhr_object.open("POST", "form.php", true);
 
   xhr_object.onreadystatechange = function() {
      if(xhr_object.readyState == 4) {
		 eval(xhr_object.responseText);
 
		 if(lemessage == "ok") {
			return true;
		  }
		  else {
			alert("le message contient:"+lemessage);
			return false;
		  }		 
	  }
   }
 
  xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr_object.send(data);
}
 
</script>
</head>
 
<body>
 
<form method="post" action="" onsubmit="return valider_form()" name="rechercher" id="rechercher" class="form">
  <fieldset>
  <legend>Affiner votre recherche</legend> <!-- Titre du fieldset -->      
 
      <label for="prix_mini">Prix mini: </label>
      <input name="prix_mini" id="prix_mini" class="champ_input2" type="text" value="<?php echo $_SESSION['prix_mini'];?>" size="7" maxlength="5" />
      <label for="prix_maxi">maxi: </label>
      <input name="prix_maxi" id="prix_maxi" class="champ_input2" type="text" value="<?php echo $_SESSION['prix_maxi'];?>" size="7" maxlength="5" />
 
      <input type="Image" class="bt_formulaire" alt="Valider le formulaire" src="images/bt_ok.jpg" />
 
  </fieldset>
</form>
 
</body>
</html>

Le php (chezmoi form.php)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?php
header('Content-type: text/html; charset=charset=utf-8');
 
if ($_POST["prix_mini"]>$_POST["prix_maxi"])
{
        echo 'var lemessage="Prix mini doit etre inferieur a prix maxi";';
}
else
{
        echo 'var lemessage="ok";';
}
?>

J'utilise firebug pour essayer de debugger mon script.

1°) Tout d'abord l'alerte s'affiche avant que form.php soit fini d'exécuter. Je voie cela dans firebug, dans console, l'url du script php s'affiche avec l'espéce de roue qui tourne a coté pour dire qu'il traite le fichier. la roue tourne encore alors que l'alert est déjà affiché.

2°) la "roue" tourne toujours, j'ai l'impression qu'il ne fini jamais de traiter ce fichier.

Auriez-vous des pistes :cry:

Précisions de code

Salut,

Tu fais plusieurs erreurs:
le onsubmit="return valider_form()": valider_form appelle ta requête AJAX asynchrone, donc avant le retour de celle-ci ta fonction valider_form a fini de s'exécuter :aie: Tu ne peux pas appeler ton script Ajax sur le onsubmit aussi basiquement. Appelle le plutôt sur le onclick d'un bouton et si c'est OK, appelle alors le submit de ton formulaire
Plus génant:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 var lemessage = "oups"; ... xhr_object.onreadystatechange = function() { if(xhr_object.readyState == 4) { eval(xhr_object.responseText); if(lemessage == "ok") { return true; } else { alert("le message contient:"+lemessage); return false; } } }
La fonction appliquée à onreadystatechange est une fonction anonyme. Sans rentrer dans les détails, ta variable lemessage dans la fonction est déjà évaluée LORS DE LA CREATION de la fonction et fait référence à la variable globale lemessage . Donc ensuite toute affectation par le eval est hors contexte (var lemessage=...). Le code que tu aurais dû écrire devrait plutôt ressembler à (hors problème de ton submit):
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 ... //var lemessage = "oups"; ... xhr_object.open("POST", "form.php", true); xhr_object.onreadystatechange = function() { if(xhr_object.readyState == 4) { //ICI la variable lemessage //et pas d'eval si on peut s'en passer var lemessage= xhr_object.responseText; if(lemessage == "ok") { //return true; } else { alert("le message contient:"+lemessage); //return false; } } } //avec form.php <?php if ($_POST["prix_mini"]>$_POST["prix_maxi"]) { echo "Prix mini doit etre inferieur a prix maxi"; } else { echo "ok" } ?>
Tu noteras que j'ai aussi mis en commentaire les return car je suppose que tu penses qu'ils s'appliquent à la fonction valider_form alors qu'ils s'appliquent à la fonction anonyme en cours (onreadystatechange ).
ERE