validation formulaire et envoi de données en ajax pour le submit

skyst3f · 23/10/2011, 15h09

Bonjour,

J'essaie depuis plusieurs jours de concevoir un formulaire où la validation des champs se ferait en jQuery et l'envoi des données en Ajax (avec jQuery aussi).

J'ai trouvé un large éventail de script pour valider des formulaire et je sais appeler une page en Ajax avec jQuery une fois le bouton submit cliqué.

Mais je n'arrive pas à combiner les deux. Prenons ce code par exemple:

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
  <script>
  $(document).ready(function(){
    $("#commentForm").validate();
 
 
 
 
 
 
    $("#commentForm").submit( function() {
 
 
 
 
			// à la soumission du formulaire						 
	$.ajax({ // fonction permettant de faire de l'ajax
		   type: "GET", // methode de transmission des données au fichier php
		   url: "ajoutcoureur.php", // url du fichier php
		   data: "nom="+$("#nom").val(), // données à transmettre
		   success: function(msg){ // si l'appel a bien fonctionné
 
					$("div#resultat").html(msg);
 
 
 
		   }
		});
		return false; // permet de rester sur la même page à la soumission du formulaire
	});
 
 
 
  });
 
 
 
  </script>
 
</head>
<body>
 
<div id="resultat"></div>
 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
   <legend>A simple comment form with submit validation and default messages</legend>
   <p>
     <label for="cname">Name</label>
     <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
   </p>
   <p>
     <label for="cemail">E-Mail</label>
     <em>*</em><input id="cemail" name="email" size="25"  class="required email" />
   </p>
   <p>
     <label for="curl">URL</label>
     <em>  </em><input id="curl" name="url" size="25"  class="url" value="" />
   </p>
   <p>
     <label for="ccomment">Your comment</label>
     <em>*</em><textarea id="ccomment" name="comment" cols="22"  class="required"></textarea>
   </p>
   <p>
     <input class="submit" type="submit" value="Submit"/>
   </p>
 </fieldset>
 </form>
</body>
</html>

Le script de validation fonctionne mais ma fonction qui s'enclenche lors du bouton submit aussi.

J'aimerai savoir comment arranger ce code pour que si la validation est ok, alors j'appelle ma fonction Ajax.

Un grand merci d'avance pour votre aide!

danielhagnoul · 23/10/2011, 22h39

Bonsoir

Attention l'ID "nom" n'existe pas.

Documentation du plugin : http://rocketsquared.com/wiki/Plugins/Validation et http://rocketsquared.com/wiki/Plugin...lidate#options

Exemple :

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
$("#commentForm").validate({
	submitHandler: function(form) {
		$.get('ajoutcoureur.php', { "nom": $("#cname").val()  }, function(data, textStatus, jqXHR) {
			console.log(data, textStatus, jqXHR);
 
			// succès de la transaction, traité le contenu de data
 
			$("#resultat").html(data); // si data est du html
 
		}).error(function(jqXHR, textStatus, errorThrown){
			console.log(jqXHR, textStatus, errorThrown);
 
			// échec de la transaction, gèrer la catastrophe
 
		});
	}
});

FAQ : Comment dois-je formuler une requête AJAX ?

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email