[AJAX] Validation Formulaire par ajax

**freak999** · 08/02/2009, 17h20

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" ?

**DoubleU** · 09/02/2009, 10h21

Plusieurs choses:

- déja ton submit n'est pas en disabled comme dans l'exemple
- tu envoies tes données en POST et ton premier test sur fait sur une variable en GET, donc tu ne rentreras jamais dans ton traitement

Ensuite, et c'est simplement un avis personnel, je trouve ce plugin très mauvais, et pour plusieurs raisons:
1/ la validation est systématiquement faite coté serveur, même pour regarder si l'adresse mail suit la bonne syntaxe.
2/ les classes css sont détournées de leur usage pour servir a stocker les règles de validation.
3/ les action sont lancées sur les evenements onblur, alors qu'elles devraient l'être plutot sur des onkeyup. Du coup, tu ne peux appuyer sur le bouton de soumission qu'apres que le dernier champ ait perdu le focus.

Pour moi, le meilleur exemple de validation de formulaire par javascript/ajax est le formulaire d'inscription à rememberthemilk.

**freak999** · 09/02/2009, 16h59

D'accord.

Comment puis-je avoir les sources de ce formulaire stp ? Et pourrais-tu m'expliquer son fonctionnement ?

Merci

**DoubleU** · 10/02/2009, 16h49

Pour les sources, c'est simple clic droit sur la page, et voir la source ^^

Pour le principe, c'est également assez simple. Sur chaque champ du formulaire, tu observes l'événement onkeyup pour déclencher la validation du texte saisi. Suivant si la validation échoue ou non, tu crées la petite icone qui va bien après ton champ via la DOM (document.createElement("img")), ou tu modifies la src de l'icone si elle existait déja.

**freak999** · 10/02/2009, 22h49

Le clic droit "Voir code source", ça, je le savais

...

Non, plus sérieusement, c'était la source PHP sur laquelle je m'interrogeais. De toute manière, cela n'a plus d'importance, j'ai réussi à avoir ce que je voulais en me basant sur une autre source (fournissant le code PHP qui est quand même le plus important dans l'histoire...).

Merci tout de même de m'avoir accordé un peu de ton temps

[AJAX] Validation Formulaire par ajax

JavaScript

Discussions similaires

Partager

Partager