[RESOLU] Message d'erreur affiché à l'écran suite à un formulaire

par **mclnt** » 04 oct. 2022, 17:51

Bonjour,

Merci de ta réponse, il y avait bien un problème d'ordre de connection dans mes liens.

Ils étaient présent mais pas dans le bon ordre.

Merci à toi !

par **ynx** » 04 oct. 2022, 13:10

Bonjour,

Commence par regarder la console de ton navigateur, tu dois avoir des erreurs javascript car il semble que tu as oublié d'importer jquery dans ton document html avant d'importer le fichier script.js

par **mclnt** » 04 oct. 2022, 12:07

Bonjour à tous,

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);
}
}
});
});

})

[RESOLU] Message d'erreur affiché à l'écran suite à un formulaire

Répondre

Étendre la vue Revue du sujet : [RESOLU] Message d'erreur affiché à l'écran suite à un formulaire

Re: Message d'erreur affiché à l'écran suite à un formulaire

Re: Message d'erreur affiché à l'écran suite à un formulaire

Message d'erreur affiché à l'écran suite à un formulaire