Valider un formulaire sans recharger la page [Résolu]

.Spirit · 16/11/2010, 22h23

Bonjour,

Voilà je suis en train de créer un portfolio en utilisant jQuery, et je bute sur un petit problème agaçant.
En fait, j'ai plusieurs pages incluses à l'aide de jQuery (load), donc une page "formulaire de contact". Seulement, lors de la validation de ce formulaire, je ne trouve pas le moyen d'exécuter le code PHP tout en gardant la même page ou en affichant un message à la place de mon formulaire (ou au dessus, enfin bref, modifier uniquement la partie "contenu", et ne pas recharger la page, car sinon je reviens sur l'accueil, et je ne veux pas).

Pour l'instant, je mets le code PHP dans index.php (les pages incluses dans index.php sont des pages html, comme contact.html), et donc la champ "action" de mon form pointe vers index.php... ça recharge donc la page. Pas ce que je veux, et en plus je n'arrive pas à afficher un message de confirmation du coup.

Voici mon code :

index.php

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Blablabla</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="affichage.js"></script>
	</head>
	<body>
		<div id="header">
		</div>
		<div id="global">
			<div id="menu">
				<a id="lien_accueil" href="#accueil"><span class="bouton_menu"><span class="texte_menu">Accueil</span></span></a>
				<a id="lien_cv" href="#cv"><span class="bouton_menu"><span class="texte_menu">CV</span></span></a>
				<a id="lien_creations" href="#creations"><span class="bouton_menu"><span class="texte_menu">Cr&eacute;ations</span></span></a>
				<a id="lien_contact" href="#contact"><span class="bouton_menu"><span class="texte_menu">Contact</span></span></a>
			</div>
			<div id="haut_corps"></div>
			<div id="fond_corps">
				<div id="contenu">
					<?php
						if (isset($_POST['submit']) && $_POST['submit']!=''){
							$_POST['submit'] = ''; //on réinitialise la variable pour éviter de refaire le traitement une infinité de fois
							$message = htmlentities($_POST['message'], ENT_QUOTES);
							$message = nl2br($message);
							$sujet = htmlentities($_POST['sujet'], ENT_QUOTES);
							$email = htmlentities($_POST['email'], ENT_QUOTES);
							$nom = htmlentities($_POST['nom'], ENT_QUOTES);
 
							if((empty($message))||(empty($sujet))||(empty($email))||(empty($nom))){
								echo 'Vous n\'avez pas remplis tous les champs.';
							}
							else {
								$mail = "pseudo@domaine.tld";
								$msg = "<p><b> Message du Portfolio ! </b></p><b> Nom: </b> $nom \n <br /> <b> Email: </b> $email \n <br /> <b> Sujet: </b> $sujet <br /> <b> Message: </b> $message <br />";
								$headers.= "From: Portfolio<$mail>";
								$headers.= "MIME-Version: 1.0\r\n";
								$headers.= "Content-type: text/html; ";
								$headers.= "charset=utf-8\r\n"; //$headers.= "charset=iso-8859-1\r\n";
								$send_mail = mail($mail,$sujet,$msg,$headers);
								if ( $send_mail == true ) {
									echo '<p>Message envoyé avec succès !</p>';
								}
								else{
									echo '<p>Erreur lors de l\'envois du message</p>';
								}
							}
						}
						else include("accueil.html");
					?>
				</div>
			</div>
			<div id="bas_corps"></div>
		</div>
		<div id="footer"><p>Copyright© 2010</p></div>
	</body>
</html>

mes fonctions jquery:

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
$(document).ready(function() {
 
	//Au chargement du site
	/*$("#contenu").slideUp("normal", function() {
		$('#contenu').load('accueil.html', function() { //on charge la page demandée
			$("#contenu").slideDown("fast");
		});
	});*/
 
	//En cas de clic sur un bouton du menu
	$("#lien_accueil").click(function() { //Lien "Accueil" cliqué
		$("#contenu").slideUp("normal", function() {
			$('#contenu').load('accueil.html', function() { //on charge la page demandée
				$("#contenu").slideDown("fast");
			});
		});
	});
	$("#lien_cv").click(function() { //Lien "CV" cliqué
		$("#contenu").slideUp("normal", function() {
			$('#contenu').load('cv.html', function() { //on charge la page demandée
				$("#contenu").slideDown("fast");
			});
		});
	});
	$("#lien_creations").click(function() { //Lien "Créations" cliqué
		$("#contenu").slideUp("normal", function() {
			$('#contenu').load('creations.html', function() { //on charge la page demandée
				$("#contenu").slideDown("fast");
			});
		});
	});
	$("#lien_contact").click(function() { //Lien "Contact" cliqué
		$("#contenu").slideUp("normal", function() {
			$('#contenu').load('contact.php', function() { //on charge la page demandée
				$("#contenu").slideDown("fast");
			});
		});
	});
	$("#btm_submit").click(function() { //Lien "Contact" cliqué
		$.post("envoi-mail.php");
	});
});

Contact.html:

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
		 <script type="text/JavaScript" language="JavaScript">
			 <!--
			 // ancienne version :
			 // var mail = /^[a-zA-Z0-9]+[a-zA-Z0-9\.-_]+@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9])+$/;
			 var mail = /^[\w\-]+(\.[\w\-]+)*@[\w\-]+(\.[\w\-]+)*\.[\w\-]{2,}$/;
 
			 function estCeUnMail(champs) {
				 reponse=mail.test(champs.value)
				 if (reponse) {
					 return true;
				 }
				 else {
					 alert("Adresse mail invalide !");
					 return false;
				 }
			 }
 
			 function verifForm(formulaire) {
				 ok = false;
				 ok = estCeUnMail(formulaire.email);
				 if (ok) {
					 formulaire.submit();
					 return true;
				 }
				 else {
					 return false;
				 }
			 }
			 //-->
		</script>
		<p>Veuillez utiliser ce formulaire pour me contacter, que ce soit pour une question, une suggestion, ou une commande.</p>
		<form action="index.php" method="post" name="contactform" onSubmit="return verification()">
		<p>Nom et Pr&eacute;nom :<br />
			<input type="text" name="nom" id="nom" class="champ_input" />
		</p>
		<p>Adresse e-mail:<br />
			<input type="text" name="email" class="champ_input" />
		</p>
		<p>Sujet du message:<br />
			<input type="text" name="sujet" id="sujet" class="champ_input" />
		</p>
		<p>Votre message:<br />
			<textarea name="message" id="message" rows="8" cols="65"></textarea>
		</p>		
			<input type="button" value="Envoyer", name="btn_submit" id="btn_submit" onClick=verifForm(this.form) />
			<input type="reset" name="reset" value="Effacer" /></form>

Il doit y avoir un moyen... mais je ne vois pas lequel, je dois louper certaines fonctions jQuery...
Serait-ce à propose de $.post() ou $.ajax() ?

Merci d'avance !

scourjean · 17/11/2010, 09h40

Je te conseille plutôt ceci dans ton cas :

Petit tutorial en FR
http://www.absurdsystem.com/form-validation-engine/

Documentation et exemple site officiel EN
http://www.position-absolute.com/art...ion-is-a-mess/

.Spirit · 17/11/2010, 10h15

Bonjour et merci pour ta réponse.

Malheureusement, il me semble que les liens donnés ne prennent pas encore compte le traitement PHP, si ?

J'ai regardé plusieurs exemples de formulaires sur le web avec jQuery et à chaque fois il manquait le plus important, ou alors je me fourvoie.

Merci d'avance;

scourjean · 17/11/2010, 10h19

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
$("#formID").validationEngine({
 
				ajaxSubmit: true,
 
					ajaxSubmitFile: "ajaxSubmit.php",
 
					ajaxSubmitMessage: "Thank you, we received your inscription!",
 
				success :  false,
 
				failure : function() {}
 
			})

Cf http://www.position-relative.net/cre...emoSubmit.html

.Spirit · 17/11/2010, 10h32

Merci, je vais approfondir dans cette voie.
Je donne une réponse ce soir ou demain, je pense pouvoir m'y pencher à nouveau sérieusement demain après-midi

edit: pour cette syntaxe:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$.post("test.php", { name: "John", time: "2pm" } );

Ça ne correspond pas à ce que je veux faire ?
J'ai tenté ça hier, sans succès. Je passais mes paramètres entre les accolades.

edit 2:
Je viens de comprendre...
Je pensais qu'il fallait absolument passer les variables en paramètre de quelque chose (peut-être avec la fonction $.post()) mais apparemment, pas sur la fonction dont tu me parles.

Merci

.Spirit · 17/11/2010, 22h32

Bon ben je sèche...

Rien n'est envoyé, donc je ne me suis pas encore penché sur la partie "confirmation d'envoi" puisque je ne reçois rien pour l'instant... Je ne sais pas si mon code PHP est exécuté...

Voici mon code:
index.php

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>blablabla</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="affichage.js"></script>
		<script src="jquery.validationEngine-fr.js" type="text/javascript"></script>
		<script src="jquery.validationEngine.js" type="text/javascript"></script>
 
	</head>
	<body>
		<div id="header"></div>
		<div id="global">
			<div id="menu">
				<a id="lien_accueil" href="#accueil"><span class="bouton_menu"><span class="texte_menu">Accueil</span></span></a>
				<a id="lien_cv" href="#cv"><span class="bouton_menu"><span class="texte_menu">CV</span></span></a>
				<a id="lien_creations" href="#creations"><span class="bouton_menu"><span class="texte_menu">Cr&eacute;ations</span></span></a>
				<a id="lien_contact" href="#contact"><span class="bouton_menu"><span class="texte_menu">Contact</span></span></a>
			</div>
			<div id="haut_corps"></div>
			<div id="fond_corps">
				<div id="contenu"></div>
			</div>
			<div id="bas_corps"></div>
		</div>
		<div id="footer"><p>Copyright© 2010</p></div>
	</body>
</html>

contact.php

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
<p>Veuillez utiliser ce formulaire pour me contacter.</p>
<form action="" method="post" name="contactform" id="contactform">
	<p>Nom et Pr&eacute;nom :<br />
		<input type="text" name="nom" id="nom" class="validate[required] text-input" />
	</p>
	<p>Adresse e-mail:<br />
		<input type="text" name="email" id="email" class="validate[required,custom[email]] text-input" />
	</p>
	<p>Sujet du message:<br />
		<input type="text" name="sujet" id="sujet" class="validate[required] text-input" />
	</p>
	<p>Votre message:<br />
		<textarea name="message" id="message" rows="8" cols="65" class="validate[required] text-input"></textarea>
	</p>		
		<input class="submit" type="submit" value="Envoyer" />
		<input type="reset" name="reset" value="Effacer" />
</form>

affichage.js

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
$(document).ready(function() {
 
	//Au chargement du site
	$("#contenu").slideUp("normal", function() {
		$('#contenu').load('accueil.html', function() { //on charge la page demandée
			$("#contenu").slideDown("fast");
		});
	});
 
	//En cas de clic sur un bouton du menu
	$("#lien_accueil").click(function() { //Lien "Accueil" cliqué
		$("#contenu").slideUp("normal", function() {
			$('#contenu').load('accueil.html', function() { //on charge la page demandée
				$("#contenu").slideDown("fast");
			});
		});
	});
	$("#lien_cv").click(function() { //Lien "CV" cliqué
		$("#contenu").slideUp("normal", function() {
			$('#contenu').load('cv.html', function() { //on charge la page demandée
				$("#contenu").slideDown("fast");
			});
		});
	});
	$("#lien_creations").click(function() { //Lien "Créations" cliqué
		$("#contenu").slideUp("normal", function() {
			$('#contenu').load('creations.html', function() { //on charge la page demandée
				$("#contenu").slideDown("fast");
			});
		});
	});
	$("#lien_contact").click(function() { //Lien "Contact" cliqué
		$("#contenu").slideUp("normal", function() {
			$('#contenu').load('contact.php', function() { //on charge la page demandée
				$("#contenu").slideDown("fast");
			});
		});
	});
	$("#contactform").validationEngine({
				ajaxSubmit: true,
					ajaxSubmitFile: "envoi-mail.php",
					ajaxSubmitMessage: "Votre message a bien été envoyé. Merci !",
				success :  false,
				failure : function() {}
	});
});

envoie-mail.php

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
<?php
	$message = htmlentities($_POST['message'], ENT_QUOTES);
	$message = nl2br($message);
	$sujet = htmlentities($_POST['sujet'], ENT_QUOTES);
	$email = htmlentities($_POST['email'], ENT_QUOTES);
	$nom = htmlentities($_POST['nom'], ENT_QUOTES);
 
	if((empty($message))||(empty($sujet))||(empty($email))||(empty($nom))){
		echo 'Vous n\'avez pas remplis tous les champs.';
	}
	else {
		$mail = "XXX@XXX.XXX";
		$msg = "<p><b> Message du Portfolio ! </b></p><b> Nom: </b> $nom \n <br /> <b> Email: </b> $email \n <br /> <b> Sujet: </b> $sujet <br /> <b> Message: </b> $message <br />";
		$headers.= "From: .Spirit.Design<$mail>";
		$headers.= "MIME-Version: 1.0\r\n";
		$headers.= "Content-type: text/html; ";
		$headers.= "charset=utf-8\r\n";
		$send_mail = mail($mail,$sujet,$msg,$headers);
		if ($send_mail == true) {
			echo 'Message envoyé avec succès !';
		}
		else {
			echo 'Erreur lors de l\'envois du message';
		}
	}
?>

Qu'est-ce que je fais de mal ?
J'ai bien inclus les librairies dans l'index.php, je ne pense pas avoir fait d'erreur dans mon formulaire sur contact.php... et sur affichage.js... je ne sais pas trop si ce que j'ai fait est bon, j'ai tenté de reproduire le code de l'exemple donné ci-dessus... sans vraiment tout comprendre de ce que j'écrivais. D'où le problème à mon avis.

Merci d'avance !

Quelqu'un a une idée ?

scourjean · 18/11/2010, 09h05

Met ça dans ton fichier contact.php ou après

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#contenu").slideDown("fast");

Code à bouger :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$("#contactform").validationEngine({
				ajaxSubmit: true,
					ajaxSubmitFile: "envoi-mail.php",
					ajaxSubmitMessage: "Votre message a bien été envoyé. Merci !",
				success :  false,
				failure : function() {}
	});

Atomya Rise · 18/11/2010, 09h50

En fait, ce que tu cherches à faire, c'est envoyer ton formulaire sans recharger ta page ?

Si c'est ceci, voici un exemple de ce que j'utilise :

Code html :

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
<div id="Forumlaire">
 
	<div style="color:red; font-size:16px"><span id="erreur"></span></div>
 
	<p>Veuillez utiliser ce formulaire pour me contacter.</p>
 
	<form action="#" name="contactform" id="contactform">
		<p>Nom et Pr&eacute;nom :<br />
			<input type="text" name="nom" id="nom" class="validate[required] text-input" />
		</p>
		<p>Adresse e-mail:<br />
			<input type="text" name="email" id="email" class="validate[required,custom[email]] text-input" />
		</p>
		<p>Sujet du message:<br />
			<input type="text" name="sujet" id="sujet" class="validate[required] text-input" />
		</p>
		<p>Votre message:<br />
			<textarea name="message" id="message" rows="8" cols="65" class="validate[required] text-input"></textarea>
		</p>		
			<input class="submit" name="Envoyer" id="Envoyer" type="submit" value="Envoyer" />
			<input type="reset" name="reset" value="Effacer" />
	</form>
 
<div>

Code php :

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
<?php
$message = htmlentities($_POST['message'], ENT_QUOTES);
$message = nl2br($message);
$sujet = htmlentities($_POST['sujet'], ENT_QUOTES);
$email = htmlentities($_POST['email'], ENT_QUOTES);
$nom = htmlentities($_POST['nom'], ENT_QUOTES);
 
$mail = "XXX@XXX.XXX";
$msg = "<p><b> Message du Portfolio ! </b></p><b> Nom: </b> $nom \n <br /> <b> Email: </b> $email \n <br /> <b> Sujet: </b> $sujet <br /> <b> Message: </b> $message <br />";
$headers.= "From: .Spirit.Design<$mail>";
$headers.= "MIME-Version: 1.0\r\n";
$headers.= "Content-type: text/html; ";
$headers.= "charset=utf-8\r\n";
$send_mail = mail($mail,$sujet,$msg,$headers);
 
if((!empty($message))&&(!empty($sujet))&&(!empty($email))&&(!empty($nom)) && ($send_mail == true)){
	echo 'Validation';
 
} else {
	if (!empty($nom)) { 
		echo "nom vide"; 
	}elseif (!empty($email)) {  
		echo "email vide"; 
	}elseif (!empty($sujet)) {
		echo "sujet vide";
	}elseif (!empty($message)) {
		echo "message vide";
	}else{
		echo "Erreur lors de l\'envois du message.";
	}
}
?>

Code javascript :

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
$(document).ready( function () {
	$("#Formulaire").submit( function() {
		$.ajax({ 
		   type: "POST", 
		   url: "envoie-mail.php", 	   
		   data: { 
				NomPrenom: $('input[type=text][name=nom]').val(),
				Email: $('input[type=text][name=email]').val(),
				Sujet: $('input[type=text][name=sujet]').val(),
				Message: $('#message').val(),
		   }, 
		   success: function(msg) { 
				if(msg == 'Validation') {
					$("span#erreur").html('Message envoyé avec succès !'); 
				} else {
					$("span#erreur").html(msg); 
				}
		   }
		});
 
		return false; 
	});
});

Il y a un début d'idée ! enfin... Je pense

.Spirit · 18/11/2010, 14h01

Monsieur Scourjean... je vous aime !

Donc c'était bien mon code js qui n'était pas interprété.

Donc j'ai forcément mal compris l'un des concepts de jQuery.
Le but de ce portfolio, outre le fait de créer une "vitrine" en ligne de mes créations et mes compétences pour les professionnels, est aussi d'apprendre quelques techniques (toute expérience est bonne à prendre, je suis étudiant), c'est pourquoi j'ai utilisé jQuery pour le site et non de simples include() PHP.

Donc je vous demanderai une dernière chose : pourquoi ?

Pourquoi la position de ce code fait qu'il est interprété ? Comment jQuery gère-t-il ça ?

D'ailleurs, c'est sûrement le même problème au niveau des slideUp et slideDown, j'avais dû imbriquer le code sans trop savoir pourquoi, sinon j'avais des bugs d'animation.

Un grand merci en tout cas pour votre aide précieuse.

Pour répondre à Atomya Rise, je vous remercie de votre réponse, c'est aussi ce que j'avais essayé au départ. Le code auraît sûrement marché aussi... si je l'avais placé au bon endroit !

Pour maintenant je vais rester sur cette solution, qui me permettra de gérer via AJAX les notifications d'erreur de remplissage du formulaire.

Merci

scourjean · 18/11/2010, 14h33

Pour explication :

A chaque fois que tu exécute une action sur un élément en jQuery il faut que celui-ci existe à la base ou du moins qu'il soit crée juste avant par une autre action. Par contre dans ce cas là justement il faut bien imbriquer et non pas séparer.

.Spirit · 18/11/2010, 14h44

D'accord ! Merci pour l'explication.

Maintenant je m'attaque au fait que mes notifications du type "ce champ est requis" s'écrivent en dessous de mon site... pas pratique.

Visiblement avec :
promptPosition: "bottomRight" si je les veux en dessous de chaque champ, serrés à droite.
Sauf que... ça fonctionne pas encore.

edit: bon ben je pensais que la suite allait découler... mais non...

Toujours le problème de positionnement, ils se placent complètement sous mon site. De plus, aucune notification comme quoi le formulaire est validé n'apparaît (pourtant le message est envoyé et tout est renseigné)
Et surtout, la fonction que je marque dans devant "success :" n'est jamais appelée, alors que la même est appelée si placée devant "failure :" ! (bien entendu, dans les cas où le formulaire est rempli avec succès ou non).
Pour finir, même si je tente de vider mon formulaire en plaçant la fonction dans "failure", au lieu de vider le formulaire, il recharge le site complètement... donc je me retrouve sur la page d'accueil.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$("#lien_contact").click(function() { //Lien "Contact" cliqué
		$("#contenu").slideUp("normal", function() {
			$('#contenu').load('contact.php', function() { //on charge la page demandée
				$("#contenu").slideDown("fast");
				$("#contactform").validationEngine({
							ajaxSubmit: true,
								ajaxSubmitFile: "envoi-mail.php",
								ajaxSubmitMessage: "Votre message a bien été envoyé. Merci !",
							success : function() { $('#contactform').reset(); },
							failure : function() {}
				});
			});
		});
	});

Courage... je vais finir par y arriver...

llaffont · 18/11/2010, 16h52

Pour avoir utilisé le plugin il-y-a quelque temps je me rappel en avoir bavé pour lui faire afficher les retours aux bons endroits.

La raison est que le moteur attends du JSON pour les erreurs :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function VerifiMail(){
[...]
$arrayError[0][0] = "#Mail"; // FIELDID ID de la balise vérifié
$arrayError[0][1] = "Ce mail est deja connu."; // TEXT ERROR    Message indiqué en cas d'erreur
$arrayError[0][2] = "error"; // BOX COLOR le type de box peut être vert ou rouge.
 
    if($AdminUser->createUser()){
        $retourJson = "true";
    }else{
        $retourJson = '{"jsonValidateReturn":'.json_encode($arrayError).'}';    
    }
echo $retourJson;
}

Je me suis pas penché sur ton Post et je n'ai pas eu le temps de regardé comment faire un truc opérationnel par rapport à ton problème

Dsl

Mais j'espère avoir apporté ma contribution à ton édifice.

.Spirit · 19/11/2010, 14h36

Mmmmh je vais voir de ce côté même si je ne suis pas certain d'avoir compris.

llaffont · 19/11/2010, 15h13

Le principe de la validation est :

Saisir dans une cellule une valeur
Libérer le Focus de la cellule
Transmettre la valeur a un script de vérification.
Paginer en fonction du retour du script

Lors de la vérification par le script tu as deux retours possibles.
True, False.

Dans le cas du False le script de vérification fournis l'ID de la cellule, le message d'erreur et la couleur du flag. (rouge ou vert)

Ce qui implique que ton Script de vérification connais le nom de la cellule vérifiée, de plus cela implique également que chaque cellules vérifiées ont leurs propre script de vérification.

Je ne fais pas le cas TRUE car généralement on affiche rien quand c'est OK, a part peut être pour un Login libre dans une fiche de création compte. Mais le principe est le même que false.

.Spirit · 19/11/2010, 15h46

Oui mais là on parle encore de traitement non ?
La vérifications est bien effective, seulement elle est affichée... en bas. C'est pas plutôt uniquement une histoire de css ou autre ?

llaffont · 19/11/2010, 15h59

Citation:

Envoyé par .Spirit

La vérifications est bien effective, seulement elle est affichée... en bas. C'est pas plutôt uniquement une histoire de css ou autre ?

Non, je ne pense pas, a moins que tu es oublié le fichier CSS, validationEngine.jquery.css, car les flags sont des DIV ayant la class formError ils sont positionné au dessus de ta page.

Je pense qu'il s'agit de ton retour script de vérification qui n'est pas bon.
Il ne doit pas retourner que un FALSE ou un TRUE, il doit dans le cas d'un echec (FALSE ) retourner du JSON comme je l'ai indiqué plus haut.

Si tu es d'accord avec cette idée montre nous l'un de tes script de vérification

.Spirit · 20/11/2010, 00h19

En fait c'est pas que je ne suis pas d'accord, c'est que je débute un peu dans tous ces types de traitements...

J'avais en effet oublié validationEngine.jQuery.css. Je l'ai ajoutée mais rien n'a changé.
Donc c'est je JSON retourné dans le cas "false" qui va permettre de connaître la position des champs et de placer correctement les notifications, c'est bien ça ?

.Spirit · 21/11/2010, 02h56

Bon ben j'ai compris.
C'est le code PHP retourné qui n'était pas correct et ne permettait pas de placer les blocs ni de valider la formulaire (bien que le code était exécuté (donc mail envoyé), le formulaire n'était pas considéré comme validé, car en effet c'est que le moteur attend en retour du JSON...

Je n'en sais pas plus, j'ai plus ou moins compris le code, même si pour moi c'est encore un peu flou (la modification est plutôt simple, mais je ne sais pas ce qu'est du JSON déjà, donc là faut que je me documente

)

Voici le code de la page envoi-mail.php modifié :

Code php :

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
<?php
	$message = htmlentities($_POST['message'], ENT_QUOTES);
	$message = nl2br($message);
	$sujet = htmlentities($_POST['sujet'], ENT_QUOTES);
	$email = htmlentities($_POST['email'], ENT_QUOTES);
	$nom = htmlentities($_POST['nom'], ENT_QUOTES);
 
 
	if((empty($message))||(empty($sujet))||(empty($email))||(empty($nom))){
		$isValidate = false;
	}
	else {
		$mail = "XXXX@XXXX.XXX";
		$msg = "<p><b> Message du Portfolio ! </b></p><b> Nom: </b> $nom \n <br /> <b> Email: </b> $email \n <br /> <b> Sujet: </b> $sujet <br /> <b> Message: </b><p> $message </p>";
		$headers.= "From: .Spirit.Design<$mail>";
		$headers.= "MIME-Version: 1.0\r\n";
		$headers.= "Content-type: text/html; ";
		$headers.= "charset=utf-8\r\n"; //$headers.= "charset=iso-8859-1\r\n";
		$send_mail = mail($mail,$sujet,$msg,$headers);
		if ( $send_mail == true ) {
				$isValidate = true;  // RETURN TRUE FROM VALIDATING, NO ERROR DETECTED
				/* RETTURN ARRAY FROM YOUR VALIDATION  */
		}
		else{
			$isValidate = false;
		}
	}
		/* THIS NEED TO BE IN YOUR FILE NO MATTERS WHAT */
	if($isValidate == true){
		echo "true";
	}else{
		echo '{"jsonValidateReturn":'.json_encode($arrayError).'}';		// RETURN ARRAY WITH ERROR
	}
?>

Il me reste maintenant à corriger un petit bug : Quand je change de page (via la méthode load de jQuery), si dans le formulaire de contact les notifications sont présentes, elles ne s'effacent pas.

Bonne nuit

Edit : J'ai réussi, il suffisait d'ajouter cette ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(".formError").fadeOut(150,function(){ $(".formError").remove(); }) ;

Avant de faire le slideUp sur chaque clic de bouton.

Ce qui 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
$(document).ready(function() {
 
	//Au chargement du site
	$("#contenu").slideUp("normal", function() {
		$('#contenu').load('accueil.html', function() { //on charge la page demandée
			$("#contenu").slideDown("fast");
		});
	});
 
	//En cas de clic sur un bouton du menu
	$("#lien_accueil").click(function() { //Lien "Accueil" cliqué
		$(".formError").fadeOut(150,function(){ $(".formError").remove(); }) ;
		$("#contenu").slideUp("normal", function() {
			$('#contenu').load('accueil.html', function() { //on charge la page demandée
				$("#contenu").slideDown("fast");
			});
		});
	});
	$("#lien_cv").click(function() { //Lien "CV" cliqué
		$(".formError").fadeOut(150,function(){ $(".formError").remove(); }) ;
		$("#contenu").slideUp("normal", function() {
			$('#contenu').load('cv.html', function() { //on charge la page demandée
				$("#contenu").slideDown("fast");
			});
		});
	});
	$("#lien_creations").click(function() { //Lien "Créations" cliqué
		$(".formError").fadeOut(150,function(){ $(".formError").remove(); }) ;
		$("#contenu").slideUp("normal", function() {
			$('#contenu').load('creations.html', function() { //on charge la page demandée
				$("#contenu").slideDown("fast");
			});
		});
	});
	$("#lien_contact").click(function() { //Lien "Contact" cliqué
		$(".formError").fadeOut(150,function(){ $(".formError").remove(); }) ;
		$("#contenu").slideUp("normal", function() {
			$('#contenu').load('contact.html', function() { //on charge la page demandée
				$("#contenu").slideDown("fast");
				$("#contactform").validationEngine({
							ajaxSubmit: true,
								ajaxSubmitFile: "envoi-mail.php",
								ajaxSubmitMessage: "<p>Votre message a bien été envoyé. Merci !<p>",
							success : false,
							failure : function() { }
				})
			});
		});
	});
});

Bonne nuit et encore merci, je reviens si j'ai des questions

17/11/2010, 10h32	#5
.Spirit Invité de passage Inscription : avril 2010 Messages : 35 Détails du profil Informations forums : Inscription : avril 2010 Messages : 35 Points : 4 Points : 4	Merci, je vais approfondir dans cette voie. Je donne une réponse ce soir ou demain, je pense pouvoir m'y pencher à nouveau sérieusement demain après-midi edit: pour cette syntaxe: Code : Sélectionner tout - Visualiser dans une fenêtre à part $.post("test.php", { name: "John", time: "2pm" } ); Ça ne correspond pas à ce que je veux faire ? J'ai tenté ça hier, sans succès. Je passais mes paramètres entre les accolades. edit 2: Je viens de comprendre... Je pensais qu'il fallait absolument passer les variables en paramètre de quelque chose (peut-être avec la fonction $.post()) mais apparemment, pas sur la fonction dont tu me parles. Merci
	00

18/11/2010, 14h33	#10
scourjean Membre éclairé sébastien courjean Inscription : novembre 2010 Messages : 204 Détails du profil Informations personnelles : Nom : sébastien courjean Localisation : France, Indre et Loire (Centre) Informations forums : Inscription : novembre 2010 Messages : 204 Points : 319 Points : 319	Pour explication : A chaque fois que tu exécute une action sur un élément en jQuery il faut que celui-ci existe à la base ou du moins qu'il soit crée juste avant par une autre action. Par contre dans ce cas là justement il faut bien imbriquer et non pas séparer. __________________ Sébastien Courjean Développeur Web scourjean@cyres.fr http://www.cyres.fr/
	00

19/11/2010, 15h13	#14
llaffont Membre éclairé Loïc Laffont Inscription : juin 2007 Messages : 495 Détails du profil Informations personnelles : Nom : Loïc Laffont Âge : 34 Localisation : France, Loire (Rhône Alpes) Informations forums : Inscription : juin 2007 Messages : 495 Points : 380 Points : 380	Le principe de la validation est : Saisir dans une cellule une valeur Libérer le Focus de la cellule Transmettre la valeur a un script de vérification. Paginer en fonction du retour du script Lors de la vérification par le script tu as deux retours possibles. True, False. Dans le cas du False le script de vérification fournis l'ID de la cellule, le message d'erreur et la couleur du flag. (rouge ou vert) Ce qui implique que ton Script de vérification connais le nom de la cellule vérifiée, de plus cela implique également que chaque cellules vérifiées ont leurs propre script de vérification. Je ne fais pas le cas TRUE car généralement on affiche rien quand c'est OK, a part peut être pour un Login libre dans une fiche de création compte. Mais le principe est le même que false. __________________ En théorie tout devrait fonctionner... La France a un incroyable talent : Son retard en technologie informatique
	00

17/11/2010, 09h40	#2
scourjean Membre éclairé sébastien courjean Inscription : novembre 2010 Messages : 204 Détails du profil Informations personnelles : Nom : sébastien courjean Localisation : France, Indre et Loire (Centre) Informations forums : Inscription : novembre 2010 Messages : 204 Points : 319 Points : 319	Je te conseille plutôt ceci dans ton cas : Petit tutorial en FR http://www.absurdsystem.com/form-validation-engine/ Documentation et exemple site officiel EN http://www.position-absolute.com/art...ion-is-a-mess/
	00

17/11/2010, 10h15	#3
.Spirit Invité de passage Inscription : avril 2010 Messages : 35 Détails du profil Informations forums : Inscription : avril 2010 Messages : 35 Points : 4 Points : 4	Bonjour et merci pour ta réponse. Malheureusement, il me semble que les liens donnés ne prennent pas encore compte le traitement PHP, si ? J'ai regardé plusieurs exemples de formulaires sur le web avec jQuery et à chaque fois il manquait le plus important, ou alors je me fourvoie. Merci d'avance;
	00

18/11/2010, 14h01	#9
.Spirit Invité de passage Inscription : avril 2010 Messages : 35 Détails du profil Informations forums : Inscription : avril 2010 Messages : 35 Points : 4 Points : 4	Monsieur Scourjean... je vous aime ! Donc c'était bien mon code js qui n'était pas interprété. Donc j'ai forcément mal compris l'un des concepts de jQuery. Le but de ce portfolio, outre le fait de créer une "vitrine" en ligne de mes créations et mes compétences pour les professionnels, est aussi d'apprendre quelques techniques (toute expérience est bonne à prendre, je suis étudiant), c'est pourquoi j'ai utilisé jQuery pour le site et non de simples include() PHP. Donc je vous demanderai une dernière chose : pourquoi ? Pourquoi la position de ce code fait qu'il est interprété ? Comment jQuery gère-t-il ça ? D'ailleurs, c'est sûrement le même problème au niveau des slideUp et slideDown, j'avais dû imbriquer le code sans trop savoir pourquoi, sinon j'avais des bugs d'animation. Un grand merci en tout cas pour votre aide précieuse. Pour répondre à Atomya Rise, je vous remercie de votre réponse, c'est aussi ce que j'avais essayé au départ. Le code auraît sûrement marché aussi... si je l'avais placé au bon endroit ! Pour maintenant je vais rester sur cette solution, qui me permettra de gérer via AJAX les notifications d'erreur de remplissage du formulaire. Merci
	00

19/11/2010, 14h36	#13
.Spirit Invité de passage Inscription : avril 2010 Messages : 35 Détails du profil Informations forums : Inscription : avril 2010 Messages : 35 Points : 4 Points : 4	Mmmmh je vais voir de ce côté même si je ne suis pas certain d'avoir compris.
	00

19/11/2010, 15h46	#15
.Spirit Invité de passage Inscription : avril 2010 Messages : 35 Détails du profil Informations forums : Inscription : avril 2010 Messages : 35 Points : 4 Points : 4	Oui mais là on parle encore de traitement non ? La vérifications est bien effective, seulement elle est affichée... en bas. C'est pas plutôt uniquement une histoire de css ou autre ?
	00

20/11/2010, 00h19	#17
.Spirit Invité de passage Inscription : avril 2010 Messages : 35 Détails du profil Informations forums : Inscription : avril 2010 Messages : 35 Points : 4 Points : 4	En fait c'est pas que je ne suis pas d'accord, c'est que je débute un peu dans tous ces types de traitements... J'avais en effet oublié validationEngine.jQuery.css. Je l'ai ajoutée mais rien n'a changé. Donc c'est je JSON retourné dans le cas "false" qui va permettre de connaître la position des champs et de placer correctement les notifications, c'est bien ça ?
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email