vérification des champs dans le formulaire avant envoi du mail

assets/js/sendEmail.js

@@ -5,6 +5,13 @@ function sendEmail() {
   const phone = document.getElementById("phone").value;
   const message = document.getElementById("message").value;
 
+  // Réinitialiser les messages d'erreur à chaque fois que la fonction est appelée
+  document.getElementById("firstname-error").textContent = "";
+  document.getElementById("name-error").textContent = "";
+  document.getElementById("email-error").textContent = "";
+  document.getElementById("phone-error").textContent = "";
+  document.getElementById("message-error").textContent = "";
+
   // Vérifier que tous les champs sont remplis
   if (
     firstName.trim() === "" ||
@@ -13,21 +20,24 @@ function sendEmail() {
     phone.trim() === "" ||
     message.trim() === ""
   ) {
-    alert("Veuillez remplir tous les champs.");
+    document.getElementById("response").textContent =
+      "Veuillez remplir tous les champs.";
     return;
   }
 
   // Vérifier le format de l'e-mail avec une regex
   const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
   if (!emailRegex.test(email)) {
-    alert("Veuillez entrer une adresse e-mail valide.");
+    document.getElementById("email-error").textContent =
+      "Veuillez entrer une adresse e-mail valide.";
     return;
   }
 
   // Vérifier le format du numéro de téléphone avec une regex
   const phoneRegex = /^\d{10}$/;
   if (!phoneRegex.test(phone)) {
-    alert("Veuillez entrer un numéro de téléphone valide (10 chiffres).");
+    document.getElementById("phone-error").textContent =
+      "Veuillez entrer un numéro de téléphone valide (10 chiffres).";
     return;
   }
 
@@ -44,11 +54,15 @@ function sendEmail() {
     })
     .then(
       () => {
-        alert("Votre message a bien été envoyé !");
+        // alert("Votre message a bien été envoyé !");
+        document.getElementById("response").textContent =
+          "Votre message a bien été envoyé !";
         document.getElementById("contact-form").reset();
       },
       (err) => {
-        alert("Désolé, une erreur s'est produite. Veuillez réessayer.");
+        // alert("Désolé, une erreur s'est produite. Veuillez réessayer.");
+        document.getElementById("response").textContent =
+          "Désolé, une erreur s'est produite. Veuillez réessayer.";
       }
     );
 }

index.html

@@ -332,6 +332,7 @@
                     id="firstname"
                     placeholder="Ex: John"
                   />
+                  <span id="firstname-error" class="text-danger"></span>
                 </div>
                 <div class="col-6 my-2">
                   <label for="name" class="form-label">Nom</label>
@@ -342,6 +343,7 @@
                     id="name"
                     placeholder="Ex: Doe"
                   />
+                  <span id="name-error" class="text-danger"></span>
                 </div>
                 <div class="col-12 my-2">
                   <label for="email" class="form-label">Email</label>
@@ -352,6 +354,7 @@
                     id="email"
                     placeholder="Ex: johndoe@example.com"
                   />
+                  <span id="email-error" class="text-danger"></span>
                 </div>
                 <div class="col-12 my-2">
                   <label for="phone" class="form-label">Téléphone</label>
@@ -362,6 +365,7 @@
                     id="phone"
                     placeholder="Ex: 1234567890"
                   />
+                  <span id="phone-error" class="text-danger"></span>
                 </div>
                 <div class="col-12 my-2">
                   <label for="message" class="form-label">Message</label>
@@ -372,7 +376,9 @@
                     rows="3"
                     placeholder="Exemple de message"
                   ></textarea>
+                  <span id="message-error" class="text-danger"></span>
                 </div>
+                <span id="response" class="text-danger"></span>
                 <div class="col-12 my-2">
                   <button
                     type="button"