Discussion :

[pierrot10]

Bonjour,

J'essaye de faire mon petit formulaire de validation. Mais n'étant pas grand expert de jQuery je bloque sur un petit point.

D'abord mon code s'exécute quand on presse le boutin submit

Code :

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

1
2
3
4
5
6
7
 
$('#module-add form#add-module').submit(function(event){
		event.preventDefault();
		Form.validate($(this));
 
		return false;
	});

Jusqu'à la OK.

En suite je vais dans ma fonction validate, et je coince pour parcourir tous les champs de mon formulaire.

Par exemple dans ce code, j'essaye de mettre un border rouge, a tous les champs de type texte, qui ont la valeur "correct"

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
 
Form = {
	init 		: function(){
 
			},
 
	validate	: function(form){
 
    	 		if ($('input[type="text"]').val() == "correct") {
 
					$(this).css("border-color","#ff2222");
 
		 			$(this).attr('value','YES');
		 			//alert('YES');
 
 
 
      			}else{
		 			alert('NO');
					$(this).attr('value','nNOT');
 
				}
 
	}// End of Validate();
 
}

Mon idée sera de parcourir tous les champs d emon formulaire.
Si un a la class "required", il controlera que le champs n'est pas vide.
Si il a une class "stringOnly" il controlera qu'il n'a que du texte
Si il a la class "numberOnly" il controlera qu'il a que des nombre

Etc....

Sauriez-vous comment parcourir ce formulaire?

Merci beaucoup

[marcha]

Salut,

tu peux utiliser le selecteur :input

Code :

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

1
2
3
4
5
6
$(":input", form).each(function() {
   var field = $(this);
   if(field.hasClass(...)) {
   }
   ...
});

[NoSmoking]

Bonjour,
pourquoi ne pas atteindre les éléments du formulaire directement grâce à leur classe.

[marcha]

Bonjour,
pourquoi ne pas atteindre les éléments du formulaire directement grâce à leur classe.

Parce que tous les champs n'ont pas forcement une classe.

EDIT: Désolé, répondu trop vite, oui dans son cas on pourrait sélectionner d'après les classes

[pierrot10]

Merci pour vos réponses. Ca m a aidé et j'ai pu avancé.
Cependant j'ai toujours un problème

Pour resumé:
Quand j'envoi un formulaire il va faire appelle a une fonction validate

Code :

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

Form.validate();

Dans le cas d'une class "required", j'applique cette function Form.required() qui fait appelle a une librairie Buuble v3

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
 
Form = {
	init 		: function(){
 
			},
 
	validate	: function(form){
 
 
				$(":input", form).each(function() {
				   	var input = $(this);
 
					if(input.hasClass('required')) {			  	
 
						Form.required(input);
					}
					if(input.hasClass('stringOnly')){
						Form.stringOnly(input);
					}
				});
			},// End of Validate();
 
	required	: function(input){
 
				$input = $(input);
 
				if($input.val().trim().match('^[\s]*[\s]*$')){
 
					$input.addClass('error'); // Ceci fonctionne très bien. La class "error" est inclue dans tous les champs vide!! 
 
					var options = {
						innerHtml		: 'Ce champs ne doit pas être vide',//$(this).attr('title'),
						themePath		: 'jquery-bubble-v3/jquerybubblepopup-themes',
						themeName 		: 'all-grey',
						distance 		: '10px',
						width			: '300px',
						alwaysVisible	: true
						//closingDelay	: 10000
 
					}
 
/*
// Quand j ajoute ceci, je dois cliquer plusieurs fois le ok du popup, et là, toutes mes bulles s'affichent sur les champs qui sont vide et qui ont la classe "required". Bizard.
					$('.required.error').each(function(index) {
						alert(index);
					});
*/			
 
					console.log(index);
					$input.CreateBubblePopup(options);
 
					//show the bubble popup with new options
					$input.ShowAllBubblePopups(options);
 
					$input.SetBubblePopupOptions( options );
 
 
 
 
 
					//$input.FreezeAllBubblePopups();
 
				}else{
 
					$input.RemoveBubblePopup();
 
				};
 
	}
 
}

J'ai trois champs input qui ont la classe "required". Quand j'envoie mon formulaire il va uniquement affiché ma bulle dans le dernier champs qui a la class "required", alors qui devrait afficher la bulle dans les trois champs qui ont la meme classe, puis ce dernier et vide.

Ce qui est marrant c'est que lorsque je j'ajoute ceci

Code :

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

1
2
3
$('.required.error').each(function(index) {
						alert(index);
					});

juste avant la ligne "console.log(index)", il y a comme un délai qui est causé par les popup et quand le dernier popup s'est fermé, là mes trois bulles reste affiché.

Ex-ce que je me suis fait comprendre dans mon explication?