Partage

Formulaire

A l'attention de Desolation

1 2 >>

Sujet résolu

12 décembre 2011 à 16:58:43

Bonjour Desolation,

Suite à mon sujet sur le formulaire que j'essaye de mettre en place.

Donc j'ai mis en place tous les checks JS et ça semble marcher: qd j'ai un champ vide ou non valide, j'ai bien un message d'erreur qui apparait à droite du champ en question avec un ptit effet fade lors de la soumission du form. Au passage je voulais mettre ce message d'erreur juste en dessous du champ concerné, mais dès que je fais le nécessaire (un simple <br /> mon message d'erreur n'apparait plus ni même au niveau console dans le code xHTML! o_O

Sinon j'ai également mis en place les checks php (ça marche aussi).

Qd je détecte côté JS qu'il n'y a pas ou plus d'erreurs sur le form je déclenche ma requête ajax, qui a l'air de marcher... càd que je récupère bien mes $_POST au niveau console MAIS je n'arrive pas à faire en sorte que le message de résultat apparaisse à l'écran alors qu'au niveau console il apparait bien dans l'onglet "réponse".
J'ai l'impression que je me plante encore dans la façon d'organiser le truc.

(A savoir que je ne me suis pas encore occupé de la fonction mail().)

Voilà ma structure:

Une page index_2.php qui contient entre autre...:

...
<div id="bloc_contact_form">
   <?php 
	include ('contact_form.php'); // page contenant le form + div de résultat juste au dessus
   ?>
</div>
...

Ma page contact_form.php avec ma div #message_form qui est censée récupérer à terme 2 types de messages: soit un message "ok mail envoyé" soit "Erreur: mail non envoyé ou pb" (pour l'instant pour les tests je ne travaille qu'avec un seul message générique):

<?php if (!empty($_POST['nom']))
{?>
	<div id="message_form">
	   <?php
		if(isset($_SESSION['erreurs_form_contact']) AND $_SESSION['erreurs_form_contact'] == 0)
		{
			vidersession();   // j'efface les variables de sessions que j'utilise pour gérer messages d'erreurs des champs (obligatoire, nom invalide, email invalide, etc)
                                         
		}?>
		<?php echo htmlspecialchars($_POST['nom']);?>, votre message a bien été envoyé.
	</div>
<?php
}
else
{?>
     <form id="contact_form" method="post">
	   <p>
		<label for="nom">Nom *</label>
	        <input type="text" class="form_champs" name="nom" id="nom" value="<?php if(!empty($_POST['contact_submit']) AND !empty($_SESSION['form_nom'])) 	{ echo htmlspecialchars($_SESSION['form_nom']); }?>" /> <!-- required-->
								
		<span class="form_champ_erreur">
			<?php
			if (!empty($_POST['contact_submit']) AND !empty($_SESSION['nom_info']))
			{
				echo htmlspecialchars($_SESSION['nom_info']);
			}
		        ?>
		</span>	
                
                [...]
                idem pour les autres champs
                [...]
                
                
                <input type="submit" class="form_submit" id="contact_submit" name="contact_submit" value="Envoyer" />
<?php
}
?>

Et côté JS ce que j'ai mis dans le ready:

$(function() { 
		$('#contact_submit').click(function() {
			valid = true;
			required_field = "Champ obligatoire";
			
			if($("#nom").val() == ""){
				$("#nom").next(".form_champ_erreur").fadeIn().text(required_field);

				valid = false;
			} 
			else if(!$("#nom").val().match(/^[a-z ]+$/i))
			{
				$("#nom").next(".form_champ_erreur").fadeIn().text("Saisissez un nom valide");
				valid = false;
				
				
 			}
			else
			{
				$("#nom").next(".form_champ_erreur").fadeOut();
			}
			
			if($("#email").val() == ""){
				$("#email").next(".form_champ_erreur").fadeIn().text(required_field);

				valid = false;
			}
			else if(!$("#email").val().match(/^[a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,6}$/i))
			{                              
				$("#email").next(".form_champ_erreur").fadeIn().text("Email invalide");
				valid = false;
				
 			}
			else
			{
				$("#email").next(".form_champ_erreur").fadeOut();
			}
			
			if($("#sujet").val() == ""){
				$("#sujet").next(".form_champ_erreur").fadeIn().text(required_field);

				valid = false;
			} 
			else
			{
				$("#sujet").next(".form_champ_erreur").fadeOut();
			}
			
			if($("#message").val() == ""){
				//$("#nom").css("border-color", "#FF0000");
				$("#message").next(".form_champ_erreur").fadeIn().text(required_field);

				valid = false;
			} 
			else
			{
				$("#message").next(".form_champ_erreur").fadeOut();
			}
								
			if (valid == true)
			{
				alert ("true");
				$('#contact_form').submit(function() { 
								
						$.ajax({
							url: 'contact_form.php',
							type: 'POST', 
							data: $(this).serialize(), 
								success: function(reponse) {
									   alert('soumission ok');
									   $('#message_form').hide().html(reponse).fadeIn('slow');
							}
						});
						return false; 
				});
				
			}				
			return valid;
		});
	});

La preuve en image:

Et côté css:

#message_form
{
	width:450px;
	color: blue;	
}

Formulaire

A l'attention de Desolation

Formulaire

Supprimer

Modérer

Signaler le message aux modérateurs