Empêcher la repetition d'animation au spam d'un bouton si valid=true
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
