Bonsoir,

Sur mon site se trouve un formulaire. Lorsqu'un champ obligatoire n'est pas rempli, une petit bulle apparait pour l'indiquer. J'aimerai également rendre le bouton "envoyer" non-cliquable et légèrement transparent si tous les champs obligatoires ne sont pas remplis.

Je suis assez débutant en jQuery, et ne trouve pas comment procéder. J'imagine que je dois placer des booléens sur les messages d'erreurs, en ensuite lancer une fonction pour le bouton. Après plusieurs bricolages rien de bon, donc je fais appel à vous.

Voici mon script jQuery pour les messages d'erreurs. Que dois-je y rajouter?

$(function(){

	/*pseudo*/
	$("#inspsd").keyup(function(){
		if($("#inspsd").val() == "")
		{
			$("#errorLogin").fadeIn().text("Veuillez choisir un pseudo.");
			
		}
		else
		{
			$("#errorLogin").fadeOut().text("");
		}
	});
	
	/*mot de passe*/
	
	$("#insmdp").keyup(function(){
		if(!$("#insmdp").val().match(/^[a-z0-9]{8,}$/i)) /*mot de passe doit avoir au moins 8 caractères*/
		{
			$("#errorMdp").fadeIn().text("Votre mot de passe est trop court.");
		}
		else
		{
			$("#errorMdp").fadeOut().text("");
		}
	});
	
	/*nom*/
	$("#insnom").keyup(function(){
		if(!$("#insnom").val().match(/^[a-z]+$/i))
		{
			$("#errorNom").fadeIn().text("Veuillez entre un nom valide.");
		}
		else
		{
			$("#errorNom").fadeOut().text("");
		}
	});
	
	/*prenom*/
	$("#inspren").keyup(function(){
		if(!$("#inspren").val().match(/^[a-z]+$/i))
		{
			$("#errorPrenom").fadeIn().text("Veuillez entre un prénom valide.");
		}
		else
		{
			$("#errorPrenom").fadeOut().text("");
		}
	});
	
	
})

Et mon bas de formulaire: (pas très important mais bon...)

<input type="submit" value="S'inscrire" name="valider" id="envoyer"/> <input type="reset" value="Annuler" name="effacer"/>

Si tu veux le rendre non cliquable essaye $('#envoyer').attr('disabled', true);

Merci, ça semble lui enlever sa fonction comme je le souhaite. Après, il reste le :hover à supprimer, mais ça j'y arriverai tout seul.

Par contre, c'est niveau condition que je suis un peu perdu. Comment conditionner le bouton en fonction de mes messages d'erreur ?

J'avais penser à quelque chose comme:

if (valid == true){
$('#envoyer').attr('disabled', false);
}
else{
$('#envoyer').attr('disabled', true);
}

avec à chaque fois des ...

valid : true

... pour chaque champs correctement rempli, mais au niveau de l'imbrication de tout ça dans mon code je galère un peu ...

Oui tu peux faire comme ça aucun problème.

Citation : Chavrou

avec à chaque fois des ...

valid : true

... pour chaque champs correctement rempli, mais au niveau de l'imbrication de tout ça dans mon code je galère un peu ...

Je te conseille plutôt d'initialiser ton booléen à true, et de le mettre à false quand un champ est mal rempli.

$(function(){
    
	var valid = true;

	/*pseudo*/
	$("#inspsd").keyup(function(){
		if($("#inspsd").val() == "")
		{
			$("#errorLogin").fadeIn().text("Veuillez choisir un pseudo.");
			valid = false;
			
		}
		else
		{
			$("#errorLogin").fadeOut().text("");
		}
	});

/* etc. */

Oui, c'est ce que j'avais en tête depuis le début, mais mon problème réside plus dans l'agencement du code. Comment récupérer la valeur de la variable "valid" de chaque fonction "keyUp", et pourvoir les réutiliser dans une autre fonction qui s'occuperait du bouton envoyer. Comment s'arranger pour éviter qu'un "valid = true;" en fin de code viennent écraser 2 ou 3 éventuels "valid = false" en début de code ...

Mon problème est donc plus un manque de connaissances techniques de jQuery que de logique.

Dans tous les cas, merci bien pour vos réponses.

Oh, j'avais pas vu que tes trucs se passaient dans un keyup()

Tu ferais mieux de les mettre dans un blur(), et il faut refaire toutes les vérifs lors de la validation. C'est à ce moment là que tu as besoin d'un booléen. (Pis évidemment les refaire encore une fois côté serveur...)

Merci pour ta réponse. Je me pencherai là-dessus demain, ce soir je sature ...

Pour le keyup() j'aimais bien l'effet "je te saute à la gorge dés que tu tape une touche de travers", mais c'est vrai que le blur() serait peut-être moins stressant pour l'utilisateur.

Juste une petite question encore. J'avais bricolé un petit truc tout moche qui en principe devait fonctionner:

if (($("#inspsd").val() == "") || (!$("#insmdp").val().match(/^[a-z0-9]{8,}$/i)) || (!$("#insnom").val().match(/^[a-z]+$/i)) || (!$("#inspren").val().match(/^[a-z]+$/i)))
	{
		$('#envoyer').attr('disabled', 'disabled');
	}
	else
	{
		$('#envoyer').removeAttr('disabled');
	}

Qu'est ce qui cloche au juste là dedans ? L'attribut 'disabled' ne se retire à aucun moment ...
Sous jQuery, cette condition peut-être utilisée tel quel, ou faut-il la mettre dans une fonction ou autre ?

Bah si ta condition est correcte, ça doit fonctionner...

edit: Après différents tests, mon problème vient bien de la non-modification de la variable valid. Comment faire pour qu'une variable initialisé hors d'une fonction soit modifiable par des fonctions qui la suivent ? Il me semblait qu'une variable placée en début de code devenait globale et était donc modifiable dans tous les code.


J'ai planché dessus (entre autre) pendant toute l'après-midi, et je bloques toujours ...

Avec ceci:

$(function(){
	
	var valid = true;	
		
	/*pseudo*/
	$("#inspsd").blur(function(){
		if($("#inspsd").val() == "")
		{
			$("#errorLogin").fadeIn().text("Veuillez choisir un pseudo.");
			valid = false;
		}
		else
		{
			$("#errorLogin").fadeOut().text("");
		}
		return valid;
	});
	
	/*mot de passe*/
	
	$("#insmdp").blur(function(){
		if(!$("#insmdp").val().match(/^[a-z0-9]{8,}$/i)) /*mot de passe doit avoir au moins 8 caractères*/
		{
			$("#errorMdp").fadeIn().text("Votre mot de passe est trop court.");
			valid = false;
		}
		else
		{
			$("#errorMdp").fadeOut().text("");
		}
		return valid;
	});
	
	/*mail*/
	$("#insmail").blur(function(){
		if(!$("#insmail").val().match(/^[a-z0-9._-]+@[a-z0-9.-]{2,}[.][a-z]{2,3}$/i))
		{
			$("#errorMail").fadeIn().text("Veuillez entrer une adresse valide.");
			valid = false;
		}
		else
		{
			$("#errorMail").fadeOut().text("");
		}
		return valid;
	});
	
	/*nom*/
	$("#insnom").blur(function(){
		if(!$("#insnom").val().match(/^[a-z]+$/i))
		{
			$("#errorNom").fadeIn().text("Veuillez entre un nom valide.");
			valid = false;
		}
		else
		{
			$("#errorNom").fadeOut().text("");
		}
		return valid;
	});
	
	/*prenom*/
	$("#inspren").blur(function(){
		if(!$("#inspren").val().match(/^[a-z]+$/i))
		{
			$("#errorPrenom").fadeIn().text("Veuillez entre un prénom valide.");
			valid = false;
		}
		else
		{
			$("#errorPrenom").fadeOut().text("");
		}
		return valid;
	});

	
	
	if (valid = false)
	{
		$('#envoyer').attr('disabled', true).fadeTo("1000", 0.2);
		
	}
	else
	{
		$('#envoyer').removeAttr('disabled');
	}

})

Le bouton ne se débloque pas quand les champs sont correctement remplis (le bouton a pour attribut de base disabled dans l'html) ... Est-ce que je fais une mauvaise utilisation de la variable var valid qui me semble être globale, et donc modifiable dans les fonctions ...

Ligne 78, tu as mis = au lieu de ==

Au-delà de ça, je vois pas d'erreurs...

edit: J'ai fait certains tests. J'ai pris exactement le même code que ci-dessous, mais avec une petit modification. La condition à partir de la ligne 83 est inclue dans une fonction qui se déclenche avec un mouseover sur le bouton. J'ai fait le test avec un alert("Youpi!") si la condition est correcte, et alert("Ooh ...") + $('#envoyer').attr('disabled',true); si elle ne l'est pas. Voilà les résultats: Si je rempli directement les champs obligatoires sans passer ma souris sur le bouton envoyer avant, lors du survol j'ai bien mon alert("Youpi!"). En revanche, si je ne rempli pas mon formulaire correctement, j'ai un alert("Ooh ...") qui s'affiche, et puis plus rien. Plus de deuxième alert si je repasse ensuite, rien de rien. J'ai fait un est au préalable sans le $('#envoyer').attr('disabled',true);, et j'avais bien soit mon "Youpi!", soit mon "Ooh.." à chaque passage sur le bouton, en fonction du respect de la condition. J'en déduit que c'est le fait de mettre un .attr('disabled',true) qui rend le bouton totalement inutilisable, même pour jQuery ...
Que faire ?


edit 2: J'ai finalement résolu le problème en faisant du bricolage... J'ai inclue le bouton dans une div qui subit le mouseover, et obligé de mettre un padding à cette div pour avoir un zone de survol tout autour du bouton disabelé qui semble être totalement inatteignable par jQuery.

Même si mon problème est résolu, j'aimerai bien avoir la réponse sur ce comportement étrange de jQuery sur les éléments "disabled", et comment le résoudre proprement.

Oui bien vu, faute d'inattention, merci.

Par contre ça ne change rien au résultat, ça ne fonctionne toujours pas ... Je ne vois pas où ce situe mon erreur.

J'ai essayé ceci également, mais sans résultat ...

$(function(){
	
	var validLogin = 1;
	var validMdp = 1;
	var validMail = 1;
	var validNom = 1;
	var validPrenom = 1;
	
		
	/*pseudo*/
	$("#inspsd").blur(function(){
		if($("#inspsd").val() == "")
		{
			$("#errorLogin").fadeIn().text("Veuillez choisir un pseudo.");
		}
		else
		{
			$("#errorLogin").fadeOut().text("");
			validLogin = 0;
		}
		return validLogin
	});
	
	/*mot de passe*/
	
	$("#insmdp").blur(function(){
		if(!$("#insmdp").val().match(/^[a-z0-9]{8,}$/i)) /*mot de passe doit avoir au moins 8 caractères*/
		{
			$("#errorMdp").fadeIn().text("Votre mot de passe est trop court.");
		}
		else
		{
			$("#errorMdp").fadeOut().text("");
			validMdp = 0;
		}
		return validMdp
	});
	
	/*mail*/
	$("#insmail").blur(function(){
		if(!$("#insmail").val().match(/^[a-z0-9._-]+@[a-z0-9.-]{2,}[.][a-z]{2,3}$/i))
		{
			$("#errorMail").fadeIn().text("Veuillez entrer une adresse valide.");
		}
		else
		{
			$("#errorMail").fadeOut().text("");
			validMail = 0;
		}
		return validMail
	});
	
	/*nom*/
	$("#insnom").blur(function(){
		if(!$("#insnom").val().match(/^[a-z]+$/i))
		{
			$("#errorNom").fadeIn().text("Veuillez entre un nom valide.");
		}
		else
		{
			$("#errorNom").fadeOut().text("");
			validNom = 0;
		}
		return validNom
	});
	
	/*prenom*/
	$("#inspren").blur(function(){
		if(!$("#inspren").val().match(/^[a-z]+$/i))
		{
			$("#errorPrenom").fadeIn().text("Veuillez entre un prénom valide.");
		}
		else
		{
			$("#errorPrenom").fadeOut().text("");
			validPrenom = 0;
		}
		return validPrenom
	});

	
	
	if ((validLogin == 0) && (validMdp == 0) && (validMail == 0) && (validNom == 0) && (validPrenom == 0))
	{
		$('#envoyer').removeAttr('disabled');
		$('#envoyer').fadeTo('1000', 0.99);
	}
	else
	{
		$('#envoyer').attr('disabled', true).fadeTo("1000", 0.2);
	}

})

J'ai à peu près rien compris. Qui plus est, le vert pomme, c'est illisible.

Tu devrais donner les tests simplifiés que tu as fait (codes HTML+JS complets), pour illustrer le problème de manière simple.