Vérification de forumaire

**__Nianiok_43___** · 05/02/2010, 11h58

Salut à tous.
Je viens à vous car j'ai un petit soucis avec un formulaire, enfin plus précisément sa vérification en JS.
Le formulaire est animé via jquerry.

La vérification fonctionne lorsque je laisse le "return false;" à la fin du code mais ceci bloc l'envoie du mail même si tout best ok...
Si je l'enlève, la vérification fonctionne (enfin on a le temps de voir que ça indique bien qu'un des champs n'est pas rempli si c'est le cas) mais ça envoie le mail quand même directement...
Donc en gros, ma vérification ne fonctionne qu'à moitié!

Je ne suis pas calé en prog donc je galère un peu et réclame votre aide car personne sur aucun forum n'a sur m'aider!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
$(document).ready(function() {     /* gestion du focus / blur */
 
	$(":input[@type!='submit']").focus(function ()  {
		$(this).removeClass();
		$(this).addClass("focus");
		$(this).parent().find(".exemple").css({display:"block"});
 
	});
 
 
 
	$(":input[@type!='submit']").blur(function  () {
 
		$(this).removeClass();
		$(this).addClass("normal");
		$(this).parent().find(".exemple").css({display:"none"});
	});
 
 
 
      /*effet alerte*/
 
	function alerte(e)  {
 
		$(e).animate({
 
			fontSize:"1.2em"
 
		}, 150, function(){
 
			$(e).animate({
 
				fontSize:"1em"
 
			}, 150);
 
		});
 
		$(e).find("input").removeClass(); $(e).find("input").addClass("erreur");
 
		$(e).find(".exemple").css({display:"block"});
 
	}
 
 
 
      /* contrôle global */
 
	$("form").submit(function(){
 
		var re1=    /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/; /*expr regul pour l'email */
		var re2 = /^[-]?\d*\.?\d*$/;    /*expr regul pour les chiffres*/
		var re3 = /\b.{10}\b/; /*expr    regul 10 caractères*/
 
 
		$(":input").each(function(){
 
			var valeur = $(this).val(); /* valeur saisie par l'utilisateur */
			var nom = $(this).attr("name"); /*nom du champ */
			var label = "l_"+nom; /* id du label */
			var p = $("#"+label+"").parent();
 
			$(this).parent().find(".exemple").css({display:"none"});
 
			if(valeur==''){ /* si c'est vide c'est pas bon */
 
				alerte(p);
 
				return false;
 
			}
 
			if(nom =='eMail') { /* teste le format  */
 
				if(!valeur.match(re1)) {
 
					alerte(p);
 
					return false;
 
				}
 
			}
 
			if(nom =='tel') { /* teste le format (chiffes please !) */
 
				if((!valeur.match(re2)) || (!valeur.match(re3))) {
 
					alerte(p);
 
					return false;
 
				}
 
			}
 
		});
 
		return false;
 
	});
 
});

Si quelqu'un voit le problème, qu'il m'en fasse part, ça serait sympa.

ps: Le formulaire en question est ici si ça peut vous aider

ps2: On m'avait conseillé de changer la fin de mon code apr celui-ci mais en vain:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$("form").submit(function(){ 
 
  var re1 = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/; 
  var re2 = /^[-]?\d*\.?\d*$/; 
  var re3 = /\b.{10}\b/; 
  var valide = true; 
 
  $(":input").each(function(){ 
    var valeur = $(this).val(); 
    var nom = $(this).attr("name"); 
    var label = "l_"+nom; 
    var $p = $("#"+label).parent(); 
 
    $(this).parent().find(".exemple").css({display:"none"}); 
 
    if(valeur==''){ 
      alerte($p); 
      valide = false; 
    } 
    if(nom=='eMail') { 
      if(!valeur.match(re1)) { 
        alerte(p); 
        valide = false; 
      } 
    } 
    if(nom =='tel') { 
      if((!valeur.match(re2)) || (!valeur.match(re3))) { 
        alerte(p); 
        valide = false; 
      } 
    } 
  }); 
  return valide; 
});

Merci d'avance.

**Bovino** · 05/02/2010, 12h25

Essaye comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("form").submit(return function(){

**__Nianiok_43___** · 05/02/2010, 12h36

Salut et merci à toi.

Malheureusement, ça ne fonctionne pas, la vérification ne se fait même plus et le mail part quand même alors qu'avant, la vérification se faisait, même si le mail partait aussi (on avait le temps de le voir avant que ça charge ma page de confirmation).

Je me demande si une solution existe. Dur pour un infographiste de plonger dans ce monde là

**danielhagnoul** · 05/02/2010, 19h40

Bonsoir.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
$(":input[type!='submit']").focus(function ()  {
	$(this).removeClass().addClass("focus").parent().find(".exemple").css({display:"block"});
});
 
$(":input[type!='submit']").blur(function(){
	$(this).removeClass().addClass("normal").parent().find(".exemple").css({display:"none"});
});
 
/*effet alerte*/
function alerte(e)  {
	$(e).animate({fontSize:"1.2em"}, 150, function(){
		$(e).animate({fontSize:"1em"}, 150);
	});
 
	$(e).find("input").removeClass().addClass("erreur");
 
	$(e).find(".exemple").css({display:"block"});
}
 
/* contrôle global */
$("form").submit(function(){
	var boolOK = true;
 
	var re1=    /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/; /*expr regul pour l'email */
	var re2 = /^[-]?\d*\.?\d*$/;    /*expr regul pour les chiffres*/
	var re3 = /\b.{10}\b/; /*expr regul 10 caractères*/
 
	var valeur, nom, label, p = null;
 
	$(":input").each(function(i, item){
		if (boolOK) {
			valeur = $(item).val(); /* valeur saisie par l'utilisateur */
			nom = $(item).attr("name"); /*nom du champ */
			label = "l_"+nom; /* id du label */
			p = $("#"+label+"").parent();
 
			$(item).parent().find(".exemple").css({display:"none"});
 
			if(valeur==''){ /* si c'est vide c'est pas bon */
				alerte(p);
				boolOK = false;
			}
 
			if(boolOK && (nom =='eMail')) { /* teste le format  */
				if(!valeur.match(re1)) {
					alerte(p);
					boolOK = false;
				}
			}
 
			if(boolOK && (nom == 'tel')) { /* teste le format (chiffes please !) */
				if((!valeur.match(re2)) || (!valeur.match(re3))) {
					alerte(p);
					boolOK = false;
				}
			}
		}
	});
 
	return boolOK;
});

Je n'ai pas testé, mais je pense que la première version de la boucle « each » devrait stopper à la première alerte, et cette version devrait traiter toutes les alertes.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
	$(":input").each(function(i, item){
			valeur = $(item).val(); /* valeur saisie par l'utilisateur */
			nom = $(item).attr("name"); /*nom du champ */
			label = "l_"+nom; /* id du label */
			p = $("#"+label+"").parent();
 
			$(item).parent().find(".exemple").css({display:"none"});
 
			if(valeur==''){ /* si c'est vide c'est pas bon */
				alerte(p);
				boolOK = false;
			}
 
			if(nom =='eMail') { /* teste le format  */
				if(!valeur.match(re1)) {
					alerte(p);
					boolOK = false;
				}
			}
 
			if(nom == 'tel') { /* teste le format (chiffes please !) */
				if((!valeur.match(re2)) || (!valeur.match(re3))) {
					alerte(p);
					boolOK = false;
				}
			}
		}
	});

**__Nianiok_43___** · 06/02/2010, 11h17

Salut et merci de t'investir à ton tour.

J'ai donc testé ta version et les 2 versions de la fonction "each".
Mais aucun ne crée une vérification du coup (le mail est systématiquement envoyé, champs remplis ou non) et le jquery (l'animation des champs lors du focus et d'une erreur) n'a plus l'air de fonctionner non plus.
Jamais je n'aurai pensé que ça serait si compliqué tout ça... Je crois que je vais finir par mettre un formulaire en flash

**danielhagnoul** · 06/02/2010, 11h23

Bonjour.

Quelle version de jQuery utilisez-vous ?

**__Nianiok_43___** · 08/02/2010, 12h01

Salut!

Ma version est la "jQuery 1.2.3 - New Wave Javascript"

Je ne sais pas si ça aidera quelqu'un mais bon...

**Sourrisseau** · 09/02/2010, 15h12

de jquery ne fonctionne pas comme vous le pensez. Grosso modo le each va parcourir des éléments différents. Mais si vous renvoyer un false , en fait le each va continuer sur l'élément suivant. Vous parcourrez un tableau et sur chaque élément il fait un traitement , même si vous mettez return false il va passer à l'élément suivant du tableau. Ce n'est pas vraiment un bug , mais peu de gens connaisse cela ( par rapport au each ).

Pour corriger faites ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
$("form").submit(function(){
	var boolOK = true;
 
	var re1=    /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/; /*expr regul pour l'email */
	var re2 = /^[-]?\d*\.?\d*$/;    /*expr regul pour les chiffres*/
	var re3 = /\b.{10}\b/; /*expr regul 10 caractères*/
 
	var valeur, nom, label, p = null ;
 
	$(":input").each(function(i, item){
			valeur = $(item).val(); /* valeur saisie par l'utilisateur */
			nom = $(item).attr("name"); /*nom du champ */
			label = "l_"+nom; /* id du label */
			p = $("#"+label+"").parent();
 
			$(item).parent().find(".exemple").css({display:"none"});
 
			if(valeur==''){ /* si c'est vide c'est pas bon */
				alerte(p);
				boolOK = false;
			}
 
			if(boolOK && (nom =='eMail')) { /* teste le format  */
				if(!valeur.match(re1)) {
					alerte(p);
					boolOK = false;
				}
			}
 
			if(boolOK && (nom == 'tel')) { /* teste le format (chiffes please !) */
				if((!valeur.match(re2)) || (!valeur.match(re3))) {
					alerte(p);
					boolOK = false;
				}
			}
 
	});
 
	return boolOK;
});

**__Nianiok_43___** · 09/02/2010, 15h29

Salut et merci de votre aide.
Mais non, y'a rien à faire...

Les animations en jquery n'apparaissent plus et le message part, champs remplis ou non.
C'est incroyable ce truc... lol

Voici la démo avec votre version modifiée: http://nianiokdesign.free.fr/temp/contact.html

**__Nianiok_43___** · 09/02/2010, 15h46

Bah en fait, j'ai modifié ma version en prenant des bouts de la votre et ça marche.
Je crois que ce n'était qu'une parenthèse manquante à la fin :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
    $("form").submit(function(){ 
 
		var boolOK = true; 
        var re1=    /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/; /*expr regul pour l'email */ 
        var re2 = /^[-]?\d*\.?\d*$/;    /*expr regul pour les chiffres*/ 
        var re3 = /\b.{10}\b/; /*expr regul 10 caractères pour le num de tel*/ 
 		var valeur, nom, label, p = null ;
 
        $(":input").each(function(){ 
 
            var valeur = $(this).val(); /* valeur saisie par l'utilisateur */ 
            var nom = $(this).attr("name"); /*nom du champ */ 
            var label = "l_"+nom; /* id du label */ 
            var p = $("#"+label+"").parent(); 
 
            $(this).parent().find(".exemple").css({display:"none"}); 
 
            if(valeur==''){ /* si c'est vide c'est pas bon */ 
 
                alerte(p); 
 
 
				boolOK = false;
 
            } 
 
            if(nom =='eMail') { /* teste le format  */ 
 
                if(!valeur.match(re1)) { 
 
                    alerte(p); 
 
 
					boolOK = false;
 
                } 
 
            } 
 
            if(nom =='tel') { /* teste le format (chiffes please !) */ 
 
                if((!valeur.match(re2)) || (!valeur.match(re3))) { 
 
                    alerte(p); 
 
 
					boolOK = false;
 
                } 
 
            } 
 
        }); 
 
 return boolOK;
 
    }); 
 
});

Par contre, y'a un truc que je n'arrive pas à résoudre et auquel je n'avais jamais fait attention :
Lors du focus, les champs deviennent d'une couleur et lors d'une erreur ils deviennent rouge (via le css).
Tous hormis mon textarea... Quelqu'un aurait d'où ça vient ?
Ça doit pas être bien compliqué mais j'ai beau chercher, je ne trouve pas...

**Sourrisseau** · 09/02/2010, 16h12

car j'ai fait un copier coller sur le code ....

Tant mieux ... pense a cliquer sur résolu ...

**__Nianiok_43___** · 09/02/2010, 16h14

Ouais, je l'ai fait.

J'ai édité mon post précédent par contre et j'en profite de ce sujet ouvert et d'avoir un connaisseur sous la main:

Par contre, y'a un truc que je n'arrive pas à résoudre et auquel je n'avais jamais fait attention :
Lors du focus, les champs deviennent d'une couleur et lors d'une erreur ils deviennent rouge (via le css).
Tous hormis mon textarea... Quelqu'un aurait d'où ça vient ?
Ça doit pas être bien compliqué mais j'ai beau chercher, je ne trouve pas...

**__Nianiok_43___** · 09/02/2010, 16h23

Bon, j'ai rajouté cette fonction et ça à l'air de fonctionner :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(e).find("textarea").removeClass(); $(e).find("textarea").addClass("erreur");

Encore merci à ceux qui se sont investis dans ce topic pour m'aider!

Vérification de forumaire

jQuery

Discussions similaires

Partager

Partager