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 :

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>
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
<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">&nbsp;</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">&nbsp;</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">&nbsp;</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" ?