Discussion :

[laetitia.ledoux]

Bonjour à tous,

Je viens vers vous car j'ai un soucis concernant mon formulaire de contact.
J'ai suivi votre tuto concernant le formulaire de contact slide-in qui fonctionne très bien de base (http://designshack.developpez.com/tu...tact-slide-in/).
Mais je souhaiterai, comme tous formulaires de contact, y ajouter des champs obligatoires, et je recherche donc quelqu'un pour m'aider dans ce sens.
J'ai suivi le tuto de GraphikArt pour la création de ces champs obligatoires mais mêlés au slide-in, ca devient le gros bazare:

En effectuant mes tests d'envoi, le slide-in se ferme que les champs soient corrects ou non :
- si les champs sont corrects, le mail s'envoie et le slide-in se ferme.
- si les champs ne sont pas corrects, le mail ne s'envoie pas (logique) et le slide-in se ferme quand même.

En fait, idéalement, je voudrais que quand on clique sur "me contacter", cela affiche le formulaire en slide-in,
et que tant que les champs ne sont pas correctement remplis ou vides, le slide-in ne se ferme pas même si l'on appuie sur le bouton "envoyer".
et si les champs sont corrects, en cliquant sur le bouton "envoyer" cela affiche la phrase comme quoi le mail a bien été envoyé et dans ce cas là soit le slide-in se ferme tout seul, soit il se ferme seulement si l'on appuie de nouveau sur "me contacter" (peu importe pour cela).

J'ai tenté de modifier la fonction closeForm() :

Code :

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

1
2
3
4
function closeForm(){
        $("#messageSent").show("slow");
        setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 3000);
    }

en la commentant ou en remplaçant "slideUp" par "slideDown", rien y fait, cela ne me convient pas.

Je vous transmets le lien afin que vous puissiez tester, ce sera peut-être plus parlant pour vous :
http://www.ledoux-webdesign.fr/sites...olio/index.php

mon code php pour les champs obligatoires :

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
35
36
37
38
39
40
41
<?php
if (!empty($_POST)) {
	extract($_POST);
	$valid=true;
	if (empty($nom)) {
		$valid=false;
		$erreurnom="Ce champ n'est pas rempli !";
	}
 
	if (!preg_match("/^[a-z0-9\-_.]+@[a-z0-9\-_.]+\.[a-z]{2,3}$/i", $email)) {
		$valid=false;
		$erreuremail="Ce champ n'est pas valide";
	}
	if (empty($email)) {
		$valid=false;
		$erreuremail="Ce champ n'est pas rempli !";
	}
 
	if (empty($message)) {
		$valid=false;
		$erreurmessage="Ce champ n'est pas rempli !";
	}
 
	if ($valid) {
		$to="laetitia.ledoux@gmail.com";
		$sujet="Message portfolio de : ".$nom;
		$header= "From: $nom <$email>\n";
		$message = stripcslashes($message);
		$nom = stripcslashes($nom);
		if (mail($to, $sujet, $message)) {
			$information="Votre message a bien été envoyé!";
			unset($nom);
			unset($email);
			unset($message);
		}else{
			$information="Une erreur est survenue, votre message n\'a pas été envoyé !";
		}
	}
 
}
?>

Mon code du js pour le slide-in :

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
$.noConflict();
    jQuery(document).ready(function($){
 
        $("#contactLink").click(function(){
            if ($("#contactForm").is(":hidden")){
                $("#contactForm").slideDown("slow");
            }else{
                $("#contactForm").slideUp("slow");
            }
        });
 
    });
 
    function closeForm(){
        $("#messageSent").show("slow");
        setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 3000);
    }

Mon code html du formulaire :

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
25
26
27
28
<div id="contactFormContainer">
        <div id="contactForm">
 
            <form method="post" action="">
            <fieldset>
 
            	<div id="blocMessage"><span id="messageSent">Votre message a été correctement envoyé !</span></div>
 
 
                <label for="nom">Nom<span class="requis">*</span></label>
                <span class="errorMessage"><?php if (isset($erreurnom)){echo $erreurnom;}?></span>
                <input class="required"  type="text" name="nom" id="nom" value="<?php if (isset($nom)) {echo $nom;}?>"/>
 
                <label for="email">Email<span class="requis">*</span></label>
                <span class="errorMessage"><?php if (isset($erreuremail)){echo $erreuremail;}?></span>
                <input class="required"  type="email" name="email" id="email" value="<?php if (isset($email)) {echo $email;}?>"/>
 
                <label for="message">Votre message<span class="requis">*</span></label>
                <span class="errorMessage"><?php if (isset($erreurmessage)){echo $erreurmessage;}?></span>
                <textarea class="required" name="message" id="message" rows="3" cols="20"><?php if (isset($message)) {echo $message;}?></textarea>		
 
                <input id="sendMail" type="submit" name="submit" onclick="closeForm()"/>
 
            </fieldset>
            </form>
        </div>
        <div id="contactLink"><p><img src="img/contact.png" alt="contactme" class="imgContact"/>Me contacter</p></div>
    </div>

En espérant, que cela pourra vous aider, dans le cas contraire, n'hésitez pas à me demander les fichiers ou à me poser des questions.

En vous remerciant grandement par avance.
Laetitia.

[la.lune]

Tu peux Essayer ceci: Faire la fermeture de façon manuel, et ne la met pas dans onclick du bouton submit, en plus ce ça enregistre un événement submit sur le formulaire qui va binder l'evènement de soumission à l'action que tu va définir, ainsi tu va faire tous les vérification avant de soumettre et puis fermer, le tout géré par ton code.
Alors tu dois avoir ceci pour le bouton de type submit

Code HTML :

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

1
2
3
4
5
            <input id="sendMail" type="submit" name="Envoyer"  /> 
         </fieldset>
       </form>
    </div>
<div id="contactLink"><p><img src="img/contact.png" alt="contactme" class="imgContact"/>Me contacter</p></div>

Voici le code JavaScript mais il faut lire la remarque qui va suivre

Code JavaScript :

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

1
2
3
4
5
6
7
8
$("#contactForm form").submit(function(event){
//VÉRIFIER SI TOUS LES CHAMPS SONT CORRECTES
//SINON DONNER MESSAGE D'ERREUR
//SI TOUT EST CORRECT FAIRE CECI
$(this).submit();//on envoie 
closeForm();
return true; //selon le cas expliquer en bas
});

REMARQUE
Dans le code JavaScript j'ai ajouté un return true à la fin, tu devra être un peu astucieuse, de façon que tout ce qui est vérifié par un comportement déjà défini que tu as cité que ça se réalise , tu ne va pas le refaire. Tu va juste vérifier ce qui crée les problèmes et qui n'est pas traité et si cela est correct tu déclenche toi même manuellement le submit , si au contraire tes vérifications ne sont pas correcte tu ne va pas déclancher mais les vérification une fois submit faire seront déclenché car mais là le return true va déclencher le submit après la fin de la méthode, du coup si la vérification par défaut que tu as déjà cité n'a pas eu lieu au premier click, il sera fait après la fin de la méthode. Dans tous les cas tout est vérifié.

Si tu veux à tout pris tout vérifier et tout mettre dans la fonction de vérification et empêcher qu’aucune une action de sumission n'ait lieu que si toi tu décide après que tout est ok, alors il faut faire un deux instructions suivantes: return false ou event.preventDefault()