Formulaire de contact avancé: js ne s'éxécute pas
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
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>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.
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.
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?
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
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>