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 : 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 <?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 :
Et enfin pour la partie HTML, cela donne :
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 <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>
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 <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é...
Est ce qu'une âme charitable saurait comment dois-je faire pour me sortir de ce problème "épineux" ?![]()
Partager