Ajax et OnSubmitRésolu/Fermé

Question

Bonjour, J'ai un problème en Javascript un peut bizard. Voila j' m'explique j'ai un formulaire avec une case et un bouton d'envoi Voici le code : Donc il s'agit d'un simple formulaire avec un input text et un submit Lorsque je quitte la case pseudo il vérifie si le pseudo est assez long est si il n'est pas déjà pris (par requête xmlhttprequest) si l'un de ses 2 conditions n'est pas bonne il affiche l'une des ligne d'erreur (les 2 span ) Je ne met pas le code, celui ci est un peux long puis se n'est pas la que se situe le problème Ensuite le visiteur envoi le formulaire donc avant d'envoi le formulaire je vérifie si il n'y a pas d'erreur dans le formulaire par une simple fonction function verifForm(f) { var pseudoOk = na_valid_pseudo(f.pseudo); if(pseudoOk) return true; else { alert("Veuillez remplir correctement tous les champs"); return false; } } Mais voila même si la case pseudo est bien remplie il ne me le valide pas et quand je fais appelle a la variable pseudoOk il me retroune soit false quand le pseudo est trop court soit undefined dans les autres cas Donc voila je ne sais pas, j'ai du mal a expliqué si vous avez des questions n'hésitez pas Piste : j'ai peux être une piste mais c'est liégé c'est que les requêtes ajax ne fonctionne pas quand elles sont appellé par OnSubmit Merci d'avance a tous Configuration: Windows 7 / Opera 10.60

A.Nonymous · Accepted Answer

Comme je disais il y a 1 an : dans un mode asynchrone, la fonction "na_valid_pseudo" ne peut à la fois lancer l'appel AJAX et retourner le statut de la réponse de cet appel. Il faut définir une fonction dite de "callback" qui reprendra les traitements une fois la réponse reçue, comme il était déjà proposé ici, mais les différents "return true" et "return false" ne servent à rien en mode asynchrone. Il faut donc forcer dans un 1er temps l'arrêt de la soumission du formulaire, puis lancer l'appel AJAX, puis en fonction de la réponse reçue, relancer une soumission de formulaire. Une solution un peu moins bricolée serait de faire ainsi : function ajaxEnvoi() { [...] xhr.onreadystatechange = function() { if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) { var res_verif=xhr.responseText; if(res_verif=="exist") { document.getElementById('error_exist_pseudo').style.display = 'inline' ; } else { document.getElementById('error_exist_pseudo').style.display = 'none'; document.getElementById('myForm').removeAttribute('onsubmit'); document.getElementById('myForm').submit(); } } } [...] } function verifForm() { ajaxEnvoi(); return false; } --------------- Au passage, j'en profite pour évoquer un plugin jQuery qui permet la soumission de formulaire en AJAX (ou Iframe, suivant les besoins) : http://jquery.malsup.com/form/

Alain_42 · Answer

tu vérifies déjà le pseudo sur le onblur par la fonction na_valid_pseudo(this) 

alors pourquoi appelles tu la même fonction au submit ? 

ta fct devrait plutôt être ainsi: 

function verifForm(f) {     
     
   if(f.pseudo.value==""){ 
        alert("Veuillez remplir correctement tous les champs");  
      return false; //on sort de la fonction       
   } 

//si on arrive la c'est qu'il n'y a pas d'erreur donc:
return true;  
}

rbinou59 · Answer

C'est vrai que c'est une solution que j'avais envisagé mais le problème c'est que mes fonction (na_valid_...) ne fond pas que renvoyer true ou false elle permette aussi d'afficher les petits message d'erreur c'est pour sa que je doit faire appelle a elle au moment ou je valide mon formulaire

A.Nonymous · Answer

Concernant la partie AJAX du test, pour rappel, le 1er signifie Asynchronous, autrement dit Asynchrone.
Ainsi, une fonction qui inclut un appel AJAX ne peut retourner la réponse de l'appel AJAX (à moins de parades hideuses, tels que "Tant que pas de réponse, boucler").
Il est possible d'utiliser le XmlHttpRequest en mode synchrone, mais cela donne une expérience utilisateur plutôt moyenne.

Pour rester en mode Asynchrone, plutôt que de faire un "return true", fais un "return false" dans tous les cas, et un "f.submit()" quand toutes les répondes AJAX auront été reçues et considérées valides.

rbinou59 · Answer

Merci de ta réponse mais je ne suis pas un AS en JavaScript et je n'est pas tout compris dans ta réponse pourrai tu la re-précisé si il te plait (surtout la fin)
Merci

A.Nonymous · Answer

Si tu souhaites un exemple de code, précises la manière dont tu fais tes appels AJAX (si utilisation de JQuery, Prototype ou autre ... ou rien de tout ça ... )

rbinou59 · Answer

Je n'utilise rien de tout sa, voila un de mes appelle ajax :

document.getElementById('error_long_pseudo').style.display = 'none';
		var xhr = getXMLHttpRequest();
		var pseudo_verif = encodeURIComponent(champ.value);

        xhr.open("POST", "script/verif_pseudo_exist.php", true);
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send("pseudo_verif="+pseudo_verif);
		xhr.onreadystatechange = function() 
		{
			if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) 
			{
				var res_verif=xhr.responseText; 
				if(res_verif=="exist")
					{
						document.getElementById('error_exist_pseudo').style.display = 'inline' ;
						return false;
					}
				else
				{
					document.getElementById('error_exist_pseudo').style.display = 'none';			
					return true;
				}
			}
		};

Merci pour ton aide

rbinou59 · Answer

Up, j'ai toujours pas de solution, s'il vous plait Help Me :)

duplex13 · Answer

Bonjour,

Même si le sujet date d'une année, il n'est pas fermé et j'ai eu le même problème que j'ai réussit à contourner.

Dans mon cas, j'ai un formulaire d'inscription et je veux vérifier que le nom d'utilisateur n'est pas déjà pris sur le onBlur du champ pseudo et sur le onSubmit du formulaire.

Sur le onBlur, on peut utiliser Ajax comme tu le fais et ça fonctionne.

Sur le onsubmit, on ne peut pas utiliser un appel asynchrone, mais il suffit de tester le contenu du span d'erreur (id = error_exist_pseudo) qui reste non vide si l'appel du onBlur a renvoyé une erreur du fait que l'utilisateur est déjà pris.

J'ai donc modifié la fonction de vérification via Ajax (na_valid_pseudo dans ton cas) en ajoutant un flag "utiliseAjax" comme paramètre. Dans le cas du onBlur, il est à 1 et on fait l'appel Ajax, dans le cas du onSubmit, il est à 0 et il suffit de tester si le span est vide ou non.

En utilisant Prototype
var monSpan = $('error_exist_pseudo');
return monSpan.empty();

Ça implique de modifier ton code pour remplir le span en cas d'erreur au lieu d'utiliser la propriété display. Ça se fait facilement avec Prototype :
var monSpan = $('error_exist_pseudo');
monSpan.update("Ce nom d'utilisateur est déjà utilisé");

En espérant que cette réponse ne soit pas trop confuse et puisse aider d'autres développeurs. Les solutions les plus simples sont souvent les meilleures.

Vincent

Ajax et OnSubmit

9 réponses

Discussions similaires

Newsletters