[AJAX] Validation Formulaire par ajax
Bonjour,
Voilà, je souhaiterais faire un formulaire qui valide via requêtes Ajax chaque champ au fur et à mesure de la saisie. Concrètement, je voudrais atteindre le résultat que l'on peut voir ici : http://maxblog.me/ajaxify/demo.php Rubrique "Pratical Examples" puis "Registration Form".
J'ai donc décidé d'utiliser le plugin jQuery en question : Ajaxify. J'ai essayé d'adapter le script mis en exemple sur la page que j'ai cité plus haut. Je cherche à l'appliquer à mon formulaire de contact situé à cette adresse : http://www.lambda-comm.fr/test/contact.php .
Le point positif, c'est que lorsque l'on soumet mon formulaire, l'envoi du mail se passe très bien.
Seulement voilà, la validation des champs ne s'effectue pas et je n'arrive pas à trouver pourquoi.
Je vous donne les codes en question :
Pour mon formmail.php, cela donne :
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
| <?php
if($_GET['action']=='regsubmit'){
if($_POST['nom']!="")
echo "<div class='nom'><img src='images/mini_check.png alt='Succés'/></div>";
else {
echo "<div class='nom'>Veuillez entrer votre nom</div>";
$error = true;
}
if(strlen($_POST['message'])>20)
echo "<div class='message'><img src='images/mini_check.png alt='Succés'/></div>";
else {
echo "<div class='message'>Veuillez écrire votre message</div>";
$error = true;
}
if(!eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$",$_POST['email'])){
echo '<div class="email">Veuillez entrer une adresse correcte</div>';
$error = true;
}
else
echo "<div class='email'><img src='images/mini_check.png alt='Succés'/></div>";
if(!$error)
echo '<div class="script"><script type="text/javascript">
$(".submit").attr("disabled",false);
</script></div>';
else
echo '<div class="script"><script type="text/javascript">
$(".submit").attr("disabled",true);
</script></div>';
}
else if($_GET['action']=='submit'){
$TO="contact@lambda-comm.fr";
$h="From: ".$_POST['email'];
$message="De : ".$_POST['nom']."\n".$_POST['message'];
$sujet="Contact Client";
mail($TO, $sujet, $message, $h);
}
?> |
Pour la partie Javascript, cela donne :
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
| <script type="text/javascript">
$(document).ready(function(){
$('#regform input').ajaxify({
event:'change',
method:'POST',
loading_img:'images/loader.gif',
loading_txt:'Vérification...',
link:'formmail.php?action=regsubmit&ajax=true',
forms:'input'
});
$('#regform textarea').ajaxify({
event:'change',
method:'POST',
loading_img:'images/loader.gif',
loading_txt:'Vérification...',
link:'formmail.php?action=regsubmit&ajax=true',
forms:'textarea'
});
$('.check').ajaxify({
event:'submit',
link:'formmail.php?action=submit&ajax=true',
forms:'.check',
target:'#result',
loading_img:'images/loader.gif',
loading_txt:'Vérification...',
method:'POST',
animateOut:{'height':'toggle'},
animateIn:{'height':'toggle'},
onSuccess:function(o,data){
$(o.target).html("<div class='success'><img src='images/check.png' alt='Succés'/> Votre message a bien été envoyé</div>");
}
});
});
</script> |
Et enfin pour la partie HTML, cela donne :
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
| <form method="post" class="check" action="">
<div id="result">
<fieldset>
<legend>Par courrier électronique en remplissant le formulaire suivant</legend>
<table id="regform">
<tr>
<td width="20%">Votre Nom :</td>
<td width="30%">
<input name="nom" type="text" class="{target:'#nom',tagToload:{'.nom':'#nom','.script':'#temp'}}" />
</td>
<td id="nom"> </td>
</tr>
<tr>
<td>Votre E-Mail :</td>
<td>
<input name="email" type="text" class="{target:'#email',tagToload:{'.email':'#email','.script':'#temp'}}" />
</td>
<td id="email"> </td>
</tr>
<tr>
<td>Votre Message :</td>
<td>
<textarea name="message" class="{target:'#message',tagToload:{'.message':'#message','.script':'#temp'}}" cols="25" rows="5"></textarea>
</td>
<td id="message"> </td>
</tr>
</table>
<input class="submit" type="submit" value="Envoyer"/> - <input type="reset" value="Annuler"/>
</fieldset>
</div>
</form>
<div id="temp"></div> |
Désolé de vous balancer mon code comme cela "à la figure" mais je suis vraiment désespéré :roll:...
Est ce qu'une âme charitable saurait comment dois-je faire pour me sortir de ce problème "épineux" ? :?
