Empêcher la repetition d'animation au spam d'un bouton si valid=true

[Shakuro]

Bonjour,

Toujours dans la conception de mon formulaire et ayant au préalable résolué mes soucis grâçe à vous (et je vous en remercie). Je me suis attaqué à la partie (error-message).

Dans mon cas et dans un premier cas j'affiche une image avec une petite croix ainsi qu'une bordure lorsque l'utilisateur ne rempli pas le champ:

Code :

1
2
3
4
5
6
 
				if($("#nom").val()==""){
					$(".border1").next(".error-message").fadeIn();
					$(".border1").css("border", "solid 2px #ff2d2d").fadeIn();
					valid=false;
				}

Dans un second cas je verifie aussi que ce qu'il a rentré correspond bien à l'expression régulière :

Code :

1
2
3
4
				else if(!$("#nom").val().match(/^[a-z-ÀÁÂÃÄÅàáâãäåÒÓÔÕÖØòóôõöøÈÉÊËèéêëÇçÌÍÎÏìíîïÙÚÛÜùúûüÿÑñ]{2,15}$/i)){
						$(".border1").next(".error-message").fadeIn();
						$(".border1").css("border", "solid 2px #ff2d2d").fadeIn();
						valid=false;

Si tout est ok, alors (else) je fais un FadeOut sur ces deux éléments:

Code :

1
2
3
4
5
6
7
8
9
10
11
				else{
					$(".border1").next(".error-message").fadeOut();
					 var div = $('.border1');
						$({alpha:1}).animate({alpha:0}, {
						duration: 500,
						step: function(){
							div.css('border-color','rgba(255,45,45,'+this.alpha+')');
							}
						});
					valid=true;
				}

Le problème c'est que le else s'applique à chaque submit, autrement dit on voit un fadeOut de la bordure à chaque clic.
J'aimerais evité cela, j'ai pensé à ceci:

Code :

1
2
3
4
 
				if($("#nom").val()=="true"{
					$(this).elementById('#nom').stop().animate();
				});

En gros, si la valid=true alors arreter l'animation, mais se n'est peut être pas le bon raisonnement, ni la bonne méthode.

J'aimerais avoir votre avis sur la question, existe t-il une méthode bien plus simple peut être ?

Merci par avance

[Bovino]

Code :

$(this).elementById('#nom')

kesako ???

[Shakuro]

Code :

$(this).elementById('#nom')

kesako ???

Code :

$(this).getElementById('#nom')

Désolé pour l'abberation syntaxique

[Bovino]

Bah... désolé, mais

Code :

$(this).getElementById('#nom')

l'est tout autant
D'abord parce que getElementById() est une méthode de l'objet document uniquement et parce que je doute que "#nom" soit l'id d'un de tes éléments, je pense que c'est plutôt "nom"

Bon, à tout hasard

Code :

$('#nom').stop().animate();

ne serait-il pas amplement suffisant ?

[SpaceFrog]

Code :

.eq(0)

ou

Code :

.get(0)

pour redescendre au document .

[Shakuro]

Code :

Code :

pour redescendre au document .

C'est-à-dire ? cela ne fonctionne pas, je vous invite à vérifier par vous même (champ nom).

ICI

1) Cliquez sur le submit tout en ayant remplis aucun champ. Constater le fadeIn.

2) Entrer un nom au hasard et cliquez sur submit constatez le fadeOut.

3) Re-cliquez plusieurs fois sur submit (le fadeOut se repette).

[SpaceFrog]

alert($("#monid").id) plantage !

alert($("#monid").get(0).id) succès !

id étant une propiété de l'objet au niveau du document et non de l'objet jquery

[Shakuro]

A mon avis c'est ma méthode de traitement qui n'est pas optimisé, car j'utilise un if pour vérifier et agir en conséquence si un champ est vide.
Un else if pour vérifier et agir en conséquence si un champ ne respecte pas mon expression régulière.
Et un else qui fait un fadeOut sur l'animation afin de la faire disparaître si aucune des deux vérifications ne soit false.

A partir de là, difficile d’agencé son code (enfin pour moi) et remettre une condition, je dois avoué que je flanche... J'ai pourtant essayé de toute sorte de façon en prenant compte de vos messages, mais sans succès.