Après le 1er click continue ainsi, mais fais quelque chose en plus

Version imprimable

Rebonjour,

Tant que mon form n'a pas été posté au moins une fois, les classes "correct" ou "incorrect" ne sont pas appliquées. C'est voulu.
Quand je poste mon form qui contient des champs vides ou incorrects, j'envoie une sliding modal qui indique les erreurs trouvées, et en même temps mes classes "correct" ou "incorrect" sont appliquées sur le form.
Je souhaite continuer à envoyer ma sliding modal chaque fois que mon form est envoyé grâce à mon input submit.

Mais je voudrais aussi, qu'après le premier click sur submit, mes classes soient appliquées à chaque modification sur un champ. J'ai essayé avec $("#form_inscription").bind('ajax_moi_ca').submit() et unbind sur le bouton close de ma sliding modal, mais apparemment c'est pas ça... Merci si vous pouvez m'indiquer l'ordre des choses :) Merci pour votre aide

Code:

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
 
function ajax_moi_ca(){                              
	$(".inputs").each(function()
	{ $(this).on("change keyup paste", function()
	  { var thisname =	$(this).attr('name'); //alert(thisname);
 
		var myForm = $('#form_inscription');
			 $.ajax({ 	  type : 'POST',
						  url : "process.php",
						  data : myForm.serialize(),
						  dataType:"json",
						  encode : true
				 })
						.done(function(data) {       
					  if ( ! data.success) 
						 { var label = $('#label_'+thisname);	
 
					      if ('data.errors.'+thisname) 
					         { label.addClass('error_empty'); }
				         else { label.removeClass('error_empty');}
					         }
			});
 
	  });
	});
};	
 
 
  $("#form_inscription").submit(function(event) 
      {event.preventDefault(); 		    
 
                      $.ajax({ 
				  type : 'POST',
				  url : "process.php",
				  data : $(this).serialize(),
				  dataType:"json",
				  encode : true
		           })
				.done(function(data) {
                               if ( ! data.success) 
		                { // j'envoie ma sliding modal + l'application de la classe error }
                                }); 	
});

29/01/2015, 16h05
SpaceFrog

regarde du coté de once() ?

Euh.. En fait peut-être que l'ordre / ou mes bindings étaient bons.
j'ai cru un instant que ma fonction on change était ok, ça a fonctionné, enfin du moins j'ai cru, mais je suis trompée ---

Code:

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
 
$(".inputs").each(function()
	{ $(this).on("change keyup paste", function()
	  { var thisname =	$(this).attr('name');  /// alert(thisname) fonctionne correctement
 
		var myForm = $('#form_inscription');
			 $.ajax({ 	  type : 'POST',
						  url : "process.php",
						  data : myForm.serialize(),
						  dataType:"json",
						  encode : true
				     })
						.done(function(data) {       
					  if ( ! data.success) 
						 { var label = $('#label_'+thisname);	
 
					      if ('data.errors.'+thisname ) /// renvoie si sur champ nom : data.errors.nom. 
					         { label.addClass('champ_vide'); }   ///  la label est correctement identifiée 
				        else { label.removeClass('champ_vide');}
					         }
 
			             });
 
	  });
	});

EDIT :

Code:

1
2
 
 <label class="label" id="label_nom">Nom</label>    <input name="nom" id="nom" type="text" class="inputs" tabindex="20" value="<?php if(isset($_POST['nom'])) echo htmlspecialchars($_POST['nom']); ?>"/>

Le vrai problème se situe au niveau de if ('data.errors.'+thisname ), qui s'impose en tant que true même si le champ en question est correctement rempli.
Any idea ? Merci beaucoup