validation formulaire et envoi de données en ajax pour le submit
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:
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!
