Formulaire de contact avancé: js ne s'éxécute pas

Par Ludovic, il y a 11 ans

Javascript

Bonjour,
Dans le tutoriel :

http://www.grafikart.fr/tutoriels/php/formulaire-contact-avance-php-55

,j'arrive à faire fonctionner le code php mais pas celui du JavaScript.
Pour simplifier l'exposé de mon problème, j'ai enlevé la partie php d'envoi de mail.

Mon but est qu'à l'envoi du formulaire, une div id="status" affiche le status de l'envoi:
succès ou echec (champs non saisis,email non valide). le code php fait la chose très bien.

En voulant avec du js donner un border-color aux champs non saisis ou à
celui d'email non valide, ce dernier ne s'éxécute pas.

Quelqu'un peut d'aider ? Merci

<?php if(!empty($_POST)){ extract($_POST); $valid=true; if($adresse !=""){}else{ if(empty($nom)){ $valid=false; $erreurnom="Vous n'avez pas rempli votre nom"; } if(!preg_match("/^[a-z0-9\-_.]+@[a-z0-9\-_.]+\.[a-z]{2,5}$/i",$email)){ $valid=false; $erreuremail="Votre email n'est pas valide"; } if(empty($email)){ $valid=false; $erreuremail="Vous n'avez pas rempli votre email"; } if(empty($message)){ $valid=false; $erreurmessage="Vous n'avez pas rempli votre message"; } if($valid){ $success="Votre message nous est bien parvenu"; unset($nom); unset($email); unset($message); } } } ?><!DOCTYPE html> <html > <head> <meta charset="utf-8"/> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <title>Tutoriel PHP: Formulaire de contact avancé - grafikart </title> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="jquery-1.10.1.min.js" type="text/javascript" ></script> <script> $(function(){ $("#adresse").hide(); $("#envoyer").click(function(){ //$valid=true; if($("#nom").val()==""){ $("#nom").css("border-color","#ff0000"); } if($("#email").val()==""){ $("#email").css("border-color","#ff0000"); }else{ if(!$("#email").val().match(/^[a-z0-9\-_.]+@[a-z0-9\-_.]+\.[a-z]{2,5}$/i)){ $("#email").css("border-color","#ff0000"); } } if($("#message").val()==""){ $("#message").css("border-color": "#ff0000"); } //return valid; }); }); </script> </head> <body> <div id="status" style='width: 500px;background:#f0f0f0;'> <?php if(isset($success)) { echo $success;} ?> <?php if(isset($erreurnom)) { echo "<span>".$erreurnom."</span><br />"; } ?> <?php if(isset($erreuremail)) { echo "<span>".$erreuremail."</span><br />"; } ?> <?php if(isset($erreurmessage)) { echo "<span>".$erreurmessage."</span><br />"; } ?> </div> <form method="post" action="index.php"> <label for="nom">NOM :</label><br/> <input type="text" name="nom" id="nom" value="<?php if(isset($nom)) echo $nom; ?>" /><br /><br /> <input type="text" id="adresse" name="adresse" /> <!-- champ caché anti spam--> <label for="email">E-MAIL :</label><br/> <input type="text" name="email" id="email" value="<?php if(isset($email)) echo $email; ?>" /><br /><br /> <label for="message">VOTRE MESSAGE :</label><br/> <textarea type="text" name="message" id="message" ><?php if(isset($message)) echo $message; ?></textarea><br /><br /> <input type="submit" id="envoyer" value="Envoyer" /> </form> </body> </html> input{ border: 2px solid #7a7a7a; } textarea{ border: 2px solid #7a7a7a; width: 500px; height: 70px; } input[type=submit]{ background-color:#ddd; cursor:pointer; } input[type=submit]:hover{ background-color:#fff; } #adresse { /*anti spam en css*/ display:none; }

10 réponses

Ludovic, il y a 11 ans

comment faire les tests avec jQuery ?

Ludovic, il y a 11 ans

Bonne suggestion : je cherche du côté des jQuery form validators

Poorman, il y a 11 ans

Salut,

Essayes avec ca:

    <script>
        $(function(){
            $("#adresse").hide();
            $("#envoyer").click(function(){            
                valid = true;
                if($("#nom").val()==""){
                    $("#nom").css("border-color","#ff0000");
                    valid = false;
                }
                if($("#email").val()==""){
                    $("#email").css("border-color","#ff0000");
                     valid = false;
                }else{
                    if(!$("#email").val().match(/^[a-z0-9\-_.]+@[a-z0-9\-_.]+\.[a-z]{2,5}$/i)){
                        $("#email").css("border-color","#ff0000");
                         valid = false;
                    }
                }
                if($("#message").val()==""){
                   $("#message").css("border-color", "#ff0000");
                    valid = false;
                }
                return valid;
            });
        });
    </script>
Ludovic, il y a 11 ans

Salut Poorman,
C'est pareil avec ton script js : la div #status qui traite avec du php marche bien; mais le js ne met pas la bordure rouge.

Poorman, il y a 11 ans

Pourtant chez moi ça fonctionne?

Ludovic, il y a 11 ans

Bon, effectivement ton code marche, mais au détriment du php : je n'arrive plus à afficher la div #status .
Je pense devoir donner des précisions : en fait, mon formulaire ( qui est ici simplifié ) comporte 15 champs.
Donc , le visiteur doit voir tout en haut du formulaire la liste des echecs (champs non saisis ou email non valide),
et qu'en scrollant vers le bas, il doit visualiser ces champs qui posent problème.
Si tout marche bien, la div #status lui retournera un message de succès.
Mais pour le moment, je n'arrive pas à faire travailler ensemble le php (pour ladiv #succes) et le js (pour les bordures rouges)
Poorman, essaie de garder le même code html-php que celui posté tout en haut, et tu verras le problème.

Poorman, il y a 11 ans

Oui j'ai vus.
Car pour que le php fonctionne, il a besoin de recharger la page (que le formulaire soit envoyé).
Pourquoi tu ne fais pas les test avec Jquery?

Ludovic, il y a 11 ans

Pour bien comprendre mon but, voici un exemple où je me suis inspiré:

http://etudiant.lefigaro.fr/les-news/agenda/depot-evenement/

Éssayez d'envoyer le formulaire sans rien saisir. Il est vital pour moi de m'en tenir au tuto de grafikart, car d'abord il est compréhensible, et que je dois y ajouter la partie Vérification avec reCaptcha et la saisie des données postées dans la base de données.
Donc , j'en appelle à votre aide

Poorman, il y a 11 ans

Ta partie php que tu as fais en haut de ton code, tu sais faire la même chose avec jquery.
Tu crées une variable en plus "msg" et tu la renvois.
Tu n'auras pas besoin de php dans cette page, mais bien dans la page que tu as indiqué dans l'action de ton form.
Ou tu peux tout faire avec de l'ajax, reseigne toi sur la fonction Jquery $.ajax

<script> $(function(){ $("#adresse").hide(); $("#envoyer").click(function(){ var etat = { msg : "", valid : true, }; if($("#nom").val()==""){ $("#nom").css("border-color","#ff0000"); etat["msg"] += "Le champ ne peut pas être vide.<br/>"; etat["valid"] = false; } if($("#email").val()==""){ $("#email").css("border-color","#ff0000"); etat["msg"] += "Le champ ne peut pas être vide.<br/>"; etat["valid"] = false; }else{ if(!$("#email").val().match(/^[a-z0-9\-_.]+@[a-z0-9\-_.]+\.[a-z]{2,5}$/i)){ $("#email").css("border-color","#ff0000"); etat["msg"] += "ce n'est pas un mail valide.<br/>"; etat["valid"] = false; } } if($("#message").val()==""){ $("#message").css("border-color", "#ff0000"); etat["msg"] += "Le champ ne peut pas être vide.<br/>"; etat["valid"] = false; } $("#status span").html(etat.msg); return etat.valid; }); }); </script>
Ludovic, il y a 11 ans

OK , j'ai resolu depuis le problème . Merci Poorman