11548 sujets

JavaScript, DOM et API Web HTML5

[résolu] Envoi des données par PHP après vérification Ajax

Bonjour

J'ai un script Ajax et PHP qui me vérifient mes données lors de l'envoi d'un formulaire, et cela fonctionne parfaitement...
Au détail près que, lorsque toute les erreurs de l'internaute ont été corrigée, le formulaire ne s’envoie pas :cry:

Voici un aperçu du code en question : 

		<body>
			<form action="signup.save.php" method="post" id="signup">
				<fieldset>

					<label for="login">Nom d'utilisateur&#8226;</label>
					<input type="text" name="login" id="login" value="" />
					<div id="msg-login">
						<img src="images/template/signup-blank-16.png" class="stt-blank" alt="Choisissez un nom d'utilisateur" title="Choisissez un nom d'utilisateur" />
						<img src="images/template/signup-warnd-16.png" class="stt-warnd" alt="Champs obligatoire" title="Champs obligatoire" />
						<img src="images/template/signup-error-16.png" class="stt-error" alt="Nom d'utilisateur indisponible" title="Nom d'utilisateur indisponible" />
						<img src="images/template/signup-valid-16.png" class="stt-valid" alt="Nom d'utilisateur disponible" title="Nom d'utilisateur disponible" />
					</div>
					<br class="clear" />

					<input type="submit" name="valid" id="valid" value="Valider" />
				</fieldset>
			</form>



			<script type="text/javascript">
				$(document).ready(function() {
					
					$('.stt-warnd').hide();
					$('.stt-error').hide();
					$('.stt-valid').hide();
					
					$('#signup').submit(function() {
						var login 	= $('#login').val();
						var dataString = 'login=' + login + '';
						var err 		= '';
	
						$.ajax({
							type: 'POST', 
							url:  'signup.check.php', 
							data: dataString, 
							success: function(data) {
								var responseData = data;
								var reg = new RegExp("[,]+", "g");
								var rag = new RegExp("[:]+", "g");
								var tab = data.split(reg);
	
								for (i = 0; i < tab.length; i++) {
									var nfo = tab[i].split(rag);
	
									if (nfo[1] == 'error') {
										$('#msg-' + nfo[0] + ' img.stt-blank').hide();
										$('#msg-' + nfo[0] + ' img.stt-warnd').hide();
										$('#msg-' + nfo[0] + ' img.stt-valid').hide();
										$('#msg-' + nfo[0] + ' img.stt-error').fadeIn();
									} else if (nfo[1] == 'valid') {
										$('#msg-' + nfo[0] + ' img.stt-blank').hide();
										$('#msg-' + nfo[0] + ' img.stt-warnd').hide();
										$('#msg-' + nfo[0] + ' img.stt-error').hide();
										$('#msg-' + nfo[0] + ' img.stt-valid').fadeIn();
									} else if (nfo[1] == 'warnd') {
										$('#msg-' + nfo[0] + ' img.stt-blank').hide();
										$('#msg-' + nfo[0] + ' img.stt-valid').hide();
										$('#msg-' + nfo[0] + ' img.stt-error').hide();
										$('#msg-' + nfo[0] + ' img.stt-warnd').fadeIn();
									}
	
								}
							}
						});
						return false;
					});
				});
			</script>

		</body>


Dans le cas présent, si je retire le 'return false;' (ligne 64), je passe sur la page 'signup.save.php', mais les données ne sont pas vérifiées ; si je laisse, mes données sont vérifiée mais je n'accède jamais à la page 'signup.save.php'.

Si vous avez une idée de comment je peux faire pour avancer, je vous en saurais gré.

Au revoir et Merci[/i]
Modifié par kamui.studio (10 Jun 2011 - 11:11)
Bonjour à toutes et à tous,

donc à bien te comprendre, tu te retrouves avec deux cas que tu ne peux pas combiner ensemble :

1) tu supprimes la ligne 64 : c'est comme s'il n'y avait pas d'erreur et donc tu accèdes à la page 'signup.save.php'.

2) tu laisses la ligne 64 : c'est comme s'il y avait une erreur et donc il n'y a aucune poursuite du traitement.

Ces deux cas fonctionnent correctement mais séparément.

Maintenant si à la ligne 64 tu mets un "return true;" au lieu du "return false;" et dans la boucle i, là où tu testes l'erreur ("if (nfo[1] == 'error')") si tu mets un "return false;" alors cela devrait fonctionner un peu mieux.

Voici l'idée que j'expose : 

success: function(data)
{ 
	var responseData = data; 
	var reg = new RegExp("[,]+", "g"); 
	var rag = new RegExp("[:]+", "g"); 
	var tab = data.split(reg); 
     
	for (var i = 0; i < tab.length; i++)
	{ 
		var nfo = tab.split(rag);

		switch (nfo[1])
		{
			case 'erreur':
				$('#msg-' + nfo[0] + ' img.stt-blank').hide(); 
				$('#msg-' + nfo[0] + ' img.stt-warnd').hide(); 
				$('#msg-' + nfo[0] + ' img.stt-valid').hide(); 
				$('#msg-' + nfo[0] + ' img.stt-error').fadeIn(); 

				return false;
				break;

			case 'valid':
				$('#msg-' + nfo[0] + ' img.stt-blank').hide(); 
				$('#msg-' + nfo[0] + ' img.stt-warnd').hide(); 
				$('#msg-' + nfo[0] + ' img.stt-error').hide(); 
				$('#msg-' + nfo[0] + ' img.stt-valid').fadeIn(); 

				return false;
				break;

			case 'warnd':
				$('#msg-' + nfo[0] + ' img.stt-blank').hide(); 
				$('#msg-' + nfo[0] + ' img.stt-valid').hide(); 
				$('#msg-' + nfo[0] + ' img.stt-error').hide(); 
				$('#msg-' + nfo[0] + ' img.stt-warnd').fadeIn();

				return false;
				break;
		}
	}

	return true;
}



@+
Modifié par Artemus24 (09 Jun 2011 - 15:23)
Bonjour Artemus24

Merci de t'intéresser à mon problème.

Après mise en place comme suit, rien ne change, et je passe systématiquement à ma page suivante, sans que les données ne soit vérifiée. Je reste donc dans le cas 1, à savoir : c'est comme s'il n'y avait pas d'erreur et donc j'accèdes à la page 'signup.save.php'.

		<script type="text/javascript">
			$(document).ready(function() {
				
				$('.stt-warnd').hide();
				$('.stt-error').hide();
				$('.stt-valid').hide();
				var err 		= '';
				
				$('#signup').unbind('#submit').submit(function() {
					var login 	= $('#login').val();
					var dataString = 'login=' + login + '';

					$.ajax({
						type: 'POST', 
						url:  'signup.check.php', 
						data: dataString, 
						success: function(data) {
							var responseData = data;
							var reg = new RegExp("[,]+", "g");
							var rag = new RegExp("[:]+", "g");
							var tab = data.split(reg);

							for (i = 0; i < tab.length; i++) {
								var nfo = tab[i].split(rag);
								if (nfo[1] == 'error') {
									$('#msg-' + nfo[0] + ' img.stt-blank').hide();
									$('#msg-' + nfo[0] + ' img.stt-warnd').hide();
									$('#msg-' + nfo[0] + ' img.stt-valid').hide();
									$('#msg-' + nfo[0] + ' img.stt-error').fadeIn();
									return false;
								} else if (nfo[1] == 'valid') {
									$('#msg-' + nfo[0] + ' img.stt-blank').hide();
									$('#msg-' + nfo[0] + ' img.stt-warnd').hide();
									$('#msg-' + nfo[0] + ' img.stt-error').hide();
									$('#msg-' + nfo[0] + ' img.stt-valid').fadeIn();
								} else if (nfo[1] == 'warnd') {
									$('#msg-' + nfo[0] + ' img.stt-blank').hide();
									$('#msg-' + nfo[0] + ' img.stt-valid').hide();
									$('#msg-' + nfo[0] + ' img.stt-error').hide();
									$('#msg-' + nfo[0] + ' img.stt-warnd').fadeIn();
									return false;
								}
							}
						}
					});
					//return false;
					return true;
				});
			});
		</script>
[/i]
Re bonjour,

je pense que le "return false;", celui de la ligne 64, n'est pas dans la bonne imbrication, essaye de la remonter d'un cran.

Le "return false;" doit être la dernière instruction de la fonction 'success' et non du 'submit'.

@+
Modifié par Artemus24 (09 Jun 2011 - 15:21)
Merci, mais le problème persiste.

Voici le code javascript tel qu'il fonctionne, pour la vérification des données (donc pas pour l'envoi du formulaire), avec en commentaire, les différentes opération résultantes de la montée ou descente du return false;

		<script type="text/javascript">
			$(document).ready(function() {
				
				$('.stt-warnd').hide();
				$('.stt-error').hide();
				$('.stt-valid').hide();
				
				$('#signup').submit(function() {
					var login 	= $('#login').val();
					var dataString = 'login=' + login + '';

					$.ajax({
						type: 'POST', 
						url:  'signup.check.php', 
						data: dataString, 
						success: function(data) {
							var responseData = data;
							var reg = new RegExp("[,]+", "g");
							var rag = new RegExp("[:]+", "g");
							var tab = data.split(reg);

							for (i = 0; i < tab.length; i++) {
								var nfo = tab[i].split(rag);

								if (nfo[1] == 'error') {
									$('#msg-' + nfo[0] + ' img.stt-blank').hide();
									$('#msg-' + nfo[0] + ' img.stt-warnd').hide();
									$('#msg-' + nfo[0] + ' img.stt-valid').hide();
									$('#msg-' + nfo[0] + ' img.stt-error').fadeIn();
								} else if (nfo[1] == 'valid') {
									$('#msg-' + nfo[0] + ' img.stt-blank').hide();
									$('#msg-' + nfo[0] + ' img.stt-warnd').hide();
									$('#msg-' + nfo[0] + ' img.stt-error').hide();
									$('#msg-' + nfo[0] + ' img.stt-valid').fadeIn();
								} else if (nfo[1] == 'warnd') {
									$('#msg-' + nfo[0] + ' img.stt-blank').hide();
									$('#msg-' + nfo[0] + ' img.stt-valid').hide();
									$('#msg-' + nfo[0] + ' img.stt-error').hide();
									$('#msg-' + nfo[0] + ' img.stt-warnd').fadeIn();
								}
								// return false;	// ne vérifie pas les données + passe à la page suivante
							}
							// return false;		// ne vérifie pas les données + passe à la page suivante
						}
						// return false;			// erreur: missing } after property list + passe à la page suivante sans vérifier
					});
					// return false;				// fonctionnel + ne passe pas à la page suivante
				});
				// return false;					// ne vérifie pas les données + passe à la page suivante
			});
		</script>
[/i]
Bonjour,

ta fonction 'success' conditionne la vérification et la poursuite du traitement.

Si la vérification n'est pas correcte alors tu dois sortir en faisant un "return false;" mais si toutes les vérifications sont correctes alors tu dois impérativement sortir avec un "return true;".

Dans mon premier message ci-dessus j'ai détaillé la fonction 'success' comme je suppose qu'elle doit être écrite.

1) il est préférable de faire un switch que des if imbriqués (mais ça ce n'est que du détail).

2) en cas d'anomalie, mettre un "return false;".

3) si tout est correcte alors terminer la fonction 'success' par un "return true;". C'est ce que j'ai voulu dire dans mon dernier message. Le positionnement de la ligne 64 est incorrecte. Tu ne dois pas mettre un "return false;" dans le 'submit' mais bien dans le 'success'.

Si le problème persiste alors je ne sais pas. Mais je pense que s'est la bonne solution car je l'aurai programmé ainsi.

@+
Modifié par Artemus24 (09 Jun 2011 - 17:48)
Bonsoir et merci Artemus24

Cependant, même avec ta mise en place, cela ne fonctionne toujours pas.

Es-ce que tu l'as testé de ton côté et que tu peux me certifier que ça fonctionne ? Car si c'est le cas, ça peut signifier que le problème vient d'ailleurs dans mon code.

Merci en tout cas.
Le sujet reste ouvert.
Bonsoir kamui.studio,

je n'ai pas pu le tester car je n'ai pas l'environnement adéquate.

Hormis ce que je t'ai dit, qui est vrai, voici une nouvelle idée de recherche après un peu plus de réflexion de ma part sur ton problème.

En effet, la méthode (ou fonction) 'success' à l'intérieur de l'objet 'ajax' n'est jamais appelé, et donc tu n'y passes jamais. Personnellement, je n'aime pas les imbrications, source de problèmes. Donc j'extérioriserais l'objet 'ajax' (mais ça ce n'est que du détail) et à l'intérieur de la fonction (ou méthode je ne sais jamais) 'submit' tu fais appel à cette fonction de la façon suivante, enfin je crois :

ajax.success(dataString);

à moins qu'il faut placer un this.ajax.success(dataString);

qui, en principe, est la dernière instruction de la fonction 'submit' puisqu'elle retourne ou 'false' ou 'true'. Je suppose que la fameuse ligne 64 où tu faisais "return false;" doit être remplacé par l'appel à la fonction 'success' en précisant d'une part le chemin pour accéder à cette fonction (ajax.success) et d'autre part le passage du paramètre.

Je suis encore débutant en WEB, donc je suis désolé de ne pas pouvoir t'aider plus.

@+
Modifié par Artemus24 (10 Jun 2011 - 09:53)
Bonjour Artemus24

J'ai résolu mon soucis. Merci encore de vous être autant intéressé au problème.

bien à vous
kamui.studio
Sujet clos
Aller à