From d97cd32dbced3e00da66ac63ffd2b9936ac71410 Mon Sep 17 00:00:00 2001
From: Axel GMX <agmx183@gmail.com>
Date: Mon, 18 Dec 2023 16:00:03 +0100
Subject: [PATCH] Issue #5 : Message de validation

---
 index.html |   7 +--
 modal.js   | 162 +++++++++++++++++++++++------------------------------
 2 files changed, 73 insertions(+), 96 deletions(-)

diff --git a/index.html b/index.html
index c5e77ab5fb..4878bade64 100644
--- a/index.html
+++ b/index.html
@@ -76,8 +76,7 @@ <h1 class="hero-headline">
             </div>
             <p class="text-label">A quel tournoi souhaitez-vous participer cette année ?</p>
             <div class="formData">
-              <input class="checkbox-input location" type="radio" id="location1" name="location" value="New York"
-                checked />
+              <input class="checkbox-input location" type="radio" id="location1" name="location" value="New York" />
               <label class="checkbox-label" for="location1">
                 <span class="checkbox-icon"></span>
                 New York</label>
@@ -105,7 +104,7 @@ <h1 class="hero-headline">
             </div>
 
             <div class="formData">
-              <input class="checkbox-input" type="checkbox" id="checkbox1" name="checkbox1" checked />
+              <input class="checkbox-input" type="checkbox" id="checkbox1" name="checkbox1" />
               <label class="checkbox2-label" for="checkbox1">
                 <span class="checkbox-icon"></span>
                 J'ai lu et accepté les conditions d'utilisation.
@@ -129,7 +128,7 @@ <h1 class="hero-headline">
       Copyright 2014 - 2022, GameOn Inc.
     </p>
   </footer>
-  <script src="modal.js"></script>
+  <script src="modal.js" defer></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/modal.js b/modal.js
index 07ef05838d..3677172cda 100644
--- a/modal.js
+++ b/modal.js
@@ -1,39 +1,22 @@
-// function editNav() {
-//   var x = document.getElementById("myTopnav");
-//   if (x.className === "topnav") {
-//     x.className += " responsive";
-//   } else {
-//     x.className = "topnav";
-//   }
-// }
-
 const toggleNavButton = document.getElementById("toggleNavButton");
 
-// Ajoute un écouteur d'événements pour le clic sur le bouton de bascule
+// event listener for toggle button clicks
 toggleNavButton.addEventListener("click", function () {
-// Récupère l'élément de la barre de navigation par son ID
   const navigation = document.getElementById("myTopnav");
 
-   // Vérifie si la classe actuelle est "main-navbar topnav"
   if (navigation.className === "main-navbar") {
-     // Ajoute la classe "responsive" si elle n'est pas présente
     navigation.className += " responsive";
   } else {
-   // Sinon, replace la classe "main-navbar"
     navigation.className = "main-navbar";
   }
 });
 
-
-
 // DOM Elements
 const modalbg = document.querySelector(".bground");
 const modalBtn = document.querySelectorAll(".modal-btn");
 const formData = document.querySelectorAll(".formData");
 const btnCloseModal = document.querySelector(".close");
-
-// launch modal event
-modalBtn.forEach((btn) => btn.addEventListener("click", launchModal));
+const form = document.forms.reserve;
 
 // launch modal form
 function launchModal() {
@@ -45,86 +28,81 @@ function closeModal() {
   modalbg.style.display = "none";
 }
 
+// launch modal event
+modalBtn.forEach((btn) => btn.addEventListener("click", launchModal));
+
 // close modal event
 btnCloseModal.addEventListener("click", closeModal);
 
-// Attend que le DOM soit entièrement chargé avant d'exécuter le script
-document.addEventListener("DOMContentLoaded", function () {
-  // Sélectionne le formulaire avec le nom "reserve"
-  const form = document.forms.reserve;
-
-  // Ajoute un écouteur d'événements "submit" au formulaire
-  form.addEventListener("submit", function (event) {
-    // Annule le comportement par défaut de soumission du formulaire
-    event.preventDefault();
+function validateEmail(email) {
+  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return regex.test(email);
+}
 
-    // Appelle la fonction de validation du formulaire
-    if (validateForm()) {
-      console.log("Formulaire valide. Données envoyées.");
-      const validationMessageElement = document.createElement("p");
-      validationMessageElement.textContent = "Félicitations, votre inscription a été validé avec succès !!!"
-      form.appendChild(validationMessageElement);
-    } else {
-      console.log("Le formulaire n'est pas valide. Veuillez corriger les erreurs.");
-      // Les données du formulaire ne sont pas effacées ici, ce qui permet à l'utilisateur de les corriger sans perdre les saisies.
+// form validation
+function validateForm() {
+  // retrieving form field values
+  const firstName = form.first.value.trim();
+  const lastName = form.last.value.trim();
+  const email = form.email.value.trim();
+  const birthdate = form.birthdate.value;
+  const currentDate = new Date();
+  const quantity = form.quantity.value.trim();
+  const location = form.querySelector('input[name="location"]:checked');
+  const checkTerms = form.checkbox1;
+
+  // checking validation conditions
+  const isFirstNameValid = firstName.length >= 2 && !firstName == "";
+  const isLastNameValid = lastName.length >= 2 && !lastName == "";
+  const isEmailValid = validateEmail(email);
+  const isBirthdateValid = !isNaN(Date.parse(birthdate)) && Date.parse(birthdate) <= currentDate.getTime();
+  const isQuantityValid = !isNaN(quantity) && quantity >= 0 && !quantity == "";
+  const isLocationValid = location !== null;
+  const isCheckTermsValid = checkTerms.checked;
+
+  // display error messages in the DOM
+  function displayError(input, message, isValid) {
+
+    const errorMessageElement = document.createElement("p");
+    errorMessageElement.className = "error-message";
+    errorMessageElement.textContent = message;
+
+    const existingMsgError = input.parentNode.querySelector(".error-message");
+    if (existingMsgError) {
+      existingMsgError.remove();
     }
-  });
-
-  // Fonction de validation du formulaire
-  function validateForm() {
-    // Récupération des valeurs des champs du formulaire
-    const firstName = form.first.value.trim(); //trim() enlève les espaces inutiles des valeurs des champs du formulaire
-    const lastName = form.last.value.trim();
-    const email = form.email.value.trim();
-    const birthdate = form.birthdate.value;
-    const quantity = form.quantity.value.trim();
-    const location = form.querySelector('input[name="location"]:checked');
-    const checkbox1 = form.checkbox1;
-
-    // Vérification des conditions de validation
-    const isFirstNameValid = firstName.length >= 2 && !firstName == "";
-    const isLastNameValid = lastName.length >= 2 && !lastName == "";
-    const isEmailValid = validateEmail(email);
-    const isBirthdateValid = !isNaN(Date.parse(birthdate));
-    const isQuantityValid = !isNaN(quantity) && quantity >= 0 && !quantity == "";
-    const isLocationValid = location !== null;
-    const isCheckbox1Valid = checkbox1.checked;
-
-    // Fonction pour afficher les messages d'erreur dans le DOM
-    function displayError(input, message, isValid) {
-
-      const errorMessageElement = document.createElement("p");
-      errorMessageElement.className = "error-message";
-      errorMessageElement.textContent = message;
-
-      const existingMsgError = input.parentNode.querySelector(".error-message");
-
-      // Vérifie si un message d'erreur n'existe pas déjà
-      if (existingMsgError) {
-        // Supprime l'élément du message d'erreur existant
-        existingMsgError.remove();
-      }
-
-      if (!isValid) {
-        // Ajoute un message d'erreur sous l'élément d'entrée si condition invalide
-        input.parentNode.appendChild(errorMessageElement);
-      }
+
+    if (!isValid) {
+      // error message below the input element if invalid condition
+      input.parentNode.appendChild(errorMessageElement);
     }
+  }
 
-    displayError(form.first, "Le champ Prénom doit avoir au moins 2 caractères.", isFirstNameValid);
-    displayError(form.last, "Le champ Nom doit avoir au moins 2 caractères.", isLastNameValid);
-    displayError(form.email, "Veuillez saisir une adresse e-mail valide.", isEmailValid);
-    displayError(form.birthdate, "Veuillez saisir votre date de naissance.", isBirthdateValid);
-    displayError(form.quantity, "Veuillez saisir un nombre valide de concours (99 max).", isQuantityValid);
-    displayError(form.querySelector(".location"), "Veuillez sélectionner une ville.", isLocationValid);
-    displayError(form.checkbox1, "Veuillez lire et accepter les conditions d'utilisation.", isCheckbox1Valid);
+  displayError(form.first, "Le champ Prénom doit avoir au moins 2 caractères.", isFirstNameValid);
+  displayError(form.last, "Le champ Nom doit avoir au moins 2 caractères.", isLastNameValid);
+  displayError(form.email, "Veuillez saisir une adresse e-mail valide.", isEmailValid);
+  displayError(form.birthdate, "Veuillez saisir votre date de naissance.", isBirthdateValid);
+  displayError(form.quantity, "Veuillez saisir un nombre valide de concours (99 max).", isQuantityValid);
+  displayError(form.querySelector(".location"), "Veuillez sélectionner une ville.", isLocationValid);
+  displayError(form.checkbox1, "Veuillez lire et accepter les conditions d'utilisation.", isCheckTermsValid);
 
-    // Retourne true si toutes les conditions sont remplies, sinon false
-    return isFirstNameValid && isLastNameValid && isEmailValid && isBirthdateValid && isQuantityValid && isLocationValid && isCheckbox1Valid;
-  }
+  return isFirstNameValid && isLastNameValid && isEmailValid && isBirthdateValid && isQuantityValid && isLocationValid && isCheckTermsValid;
+}
+
+// submit form event
+form.addEventListener("submit", function (event) {
+  event.preventDefault();
 
-  function validateEmail(email) {
-    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    return regex.test(email);
+  const existingValidationMessage = document.querySelector(".validation-message");
+
+  if (validateForm()) {
+    if (!existingValidationMessage) {
+      const validationMessageElement = document.createElement("p");
+      validationMessageElement.className = "validation-message";
+      validationMessageElement.textContent = "Félicitations, votre inscription a été validée avec succès !!!";
+      form.appendChild(validationMessageElement);
+    }
+  } else {
+    existingValidationMessage.remove();
   }
-});
+});
\ No newline at end of file