Suite à la mise en place d'un formulaire de contact sur un site web, j'ai le message d'erreur suivant qui s'affiche à l'écran lorsque que je valide le formulaire :
{"firstname":"Albert","name":"Robert","email":"","phone":"0123456789","message":"TEST","firstnameError":"","nameError":"",
"emailError":"","phoneError":"","messageError":"","isSuccess":true}
Or je souhaite que le formulaire m'envoie un mail et annonce à l'utilisateur que le message à bien été envoyé.
Je n'ai pas encore écrit la partie pour indiquer à l'utilisateur que le message est envoyé mais j'ai déjà un message d'erreur.
Quelqu'un aurait la solution svp ?
<!DOCTYPE html>
<html>
<head>
<title>AAA | Contact</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png" href="favicon-16x16.png" sizes="16x16"/>
<link rel="shortcut icon" type="image/png" href="favicon-32x32.png" sizes="32x32"/>
<link rel="shortcut icon" type="image/png" href="apple-touch-icon.png"/>
<link rel="shortcut icon" type="image/png" href="android-chrome-192x192.png" sizes="192x192"/>
<link rel="shortcut icon" type="image/png" href="android-chrome-512x512.png" sizes="512x512"/>
<link rel="shortcut icon" href="favicon.ico"/>
<link rel="stylesheet" href="style contact.css" type="text/css">
<script src="script.js"></script>
</head>
<body>
<header>
<nav id="myNavbar" class="navbar navbar-expand-lg navbar-dark sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" href="index.html">Accueil</a>
<!--<a class="nav-link" href="#skills">Qui sommes-nous ?</a>-->
<a class="nav-link active" aria-current="page" href="contact.html">Contact</a>
</div>
</div>
</div>
</nav>
</header>
<div class="container">
<div class="divider"></div>
<div class="heading">
<h2>Contactez-moi</h2>
</div>
<form id="contact-form" method="post" action="contact.php" role="form">
<div class="row">
<div class="col-lg-6">
<label for="firstname" class="form-label">Prénom <span class="blue">*</span></label>
<input id="firstname" type="text" name="firstname" class="form-control" placeholder="Votre prénom">
<p class="comments"></p>
</div>
<div class="col-lg-6">
<label for="name" class="form-label">Nom <span class="blue">*</span></label>
<input id="name" type="text" name="name" class="form-control" placeholder="Votre Nom">
<p class="comments"></p>
</div>
<div class="col-lg-6">
<label for="email" class="form-label">Email <span class="blue">*</span></label>
<input id="email" type="text" name="email" class="form-control" placeholder="Votre Email">
<p class="comments"></p>
</div>
<div class="col-lg-6">
<label for="phone" class="form-label">Téléphone</label>
<input id="phone" type="text" name="phone" class="form-control" placeholder="Votre Téléphone">
<p class="comments"></p>
</div>
<div>
<label for="message" class="form-label">Message <span class="blue">*</span></label>
<textarea id="message" name="message" class="form-control" placeholder="Votre Message" rows="4"></textarea>
<p class="comments"></p>
</div>
<div>
<p class="blue"><strong>* Ces informations sont requises.</strong></p>
</div>
<div>
<input type="submit" class="button1" value="Envoyer">
</div>
</div>
</form>
</div>
</body>
</html><?php
$array = array("firstname" => "", "name" => "", "email" => "", "phone" => "", "message" => "", "firstnameError" => "", "nameError" => "", "emailError" => "", "phoneError" => "", "messageError" => "", "isSuccess" => false);
$emailTo = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$array["firstname"] = test_input($_POST["firstname"]);
$array["name"] = test_input($_POST["name"]);
$array["email"] = test_input($_POST["email"]);
$array["phone"] = test_input($_POST["phone"]);
$array["message"] = test_input($_POST["message"]);
$array["isSuccess"] = true;
$emailText = "";
if (empty($array["firstname"])) {
$array["firstnameError"] = "Veuillez renseigner votre prénom.";
$array["isSuccess"] = false;
} else {
$emailText .= "Firstname: {$array['firstname']}\n";
}
if (empty($array["name"])) {
$array["nameError"] = "Veuillez renseigner votre nom";
$array["isSuccess"] = false;
} else {
$emailText .= "Name: {$array['name']}\n";
}
if(!isEmail($array["email"])) {
$array["emailError"] = "Veuillez respecter le format email ().";
$array["isSuccess"] = false;
} else {
$emailText .= "Email: {$array['email']}\n";
}
if (!isPhone($array["phone"])) {
$array["phoneError"] = "Veuillez indiquer un numéro de téléphone valide.";
$array["isSuccess"] = false;
} else {
$emailText .= "Phone: {$array['phone']}\n";
}
if (empty($array["message"])) {
$array["messageError"] = "Veuillez insérer votre message.";
$array["isSuccess"] = false;
} else {
$emailText .= "Message: {$array['message']}\n";
}
if($array["isSuccess"]) {
$headers = "From: {$array['firstname']} {$array['name']} <{$array['email']}>\r\nReply-To: {$array['email']}";
mail($emailTo, "Un message de votre site", $emailText, $headers);
}
echo json_encode($array);
}
function isEmail($email) {
return filter_var($email, FILTER_VALIDATE_EMAIL);
}
function isPhone($phone) {
return preg_match("/^[0-9 ]*$/",$phone);
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>JAVASCRIPT :
$(function () {
$('#contact-form').submit(function(e) {
e.preventDefault();
$('.comments').empty();
var postdata = $('#contact-form').serialize();
$.ajax({
type: 'POST',
url: 'php/contact.php',
data: postdata,
dataType: 'json',
success: function(json) {
if(json.isSuccess) {
$('#contact-form').append("<p class='thank-you'>Votre message a bien été envoyé. Merci de m'avoir contacté
</p>");$('#contact-form')[0].reset();
} else {
$('#firstname + .comments').html(json.firstnameError);
$('#name + .comments').html(json.nameError);
$('#email + .comments').html(json.emailError);
$('#phone + .comments').html(json.phoneError);
$('#message + .comments').html(json.messageError);
}
}
});
});
})