implement form input #2

starterOnly/index.html

@@ -60,11 +60,10 @@ <h1 class="hero-headline">
               name="reserve"
               action="index.html"
               method="get"
-              onsubmit="return validate();"
             >
               <div
                 class="formData">
-                <label>Prénom</label><br>
+                <label for="first">Prénom</label><br>
                 <input
                   class="text-control"
                   type="text"
@@ -75,7 +74,7 @@ <h1 class="hero-headline">
               </div>
               <div
                 class="formData">
-                <label>Nom</label><br>
+                <label for="last">Nom</label><br>
                 <input
                   class="text-control"
                   type="text"
@@ -85,7 +84,7 @@ <h1 class="hero-headline">
               </div>
               <div
                 class="formData">
-                <label>E-mail</label><br>
+                <label for="email">E-mail</label><br>
                 <input
                   class="text-control"
                   type="email"
@@ -95,7 +94,7 @@ <h1 class="hero-headline">
               </div>
               <div
                 class="formData">
-                <label>Date de naissance</label><br>
+                <label for="birthdate">Date de naissance</label><br>
                 <input
                   class="text-control"
                   type="date"
@@ -105,7 +104,7 @@ <h1 class="hero-headline">
               </div>
               <div
                 class="formData">
-                <label>À combien de tournois GameOn avez-vous déjà participé ?</label><br>
+                <label for="quantity">À combien de tournois GameOn avez-vous déjà participé ?</label><br>
                 <input type="number" class="text-control" id="quantity" name="quantity" min="0" max="99">
               </div>
               <p class="text-label">A quel tournoi souhaitez-vous participer cette année ?</p>
@@ -195,7 +194,7 @@ <h1 class="hero-headline">
                 <input class="checkbox-input" type="checkbox" id="checkbox2" />
                 <label class="checkbox2-label" for="checkbox2">
                   <span class="checkbox-icon"></span>
-                  Je Je souhaite être prévenu des prochains évènements.
+                  Je souhaite être prévenu des prochains évènements.
                 </label>
                 <br>
               </div>

starterOnly/modal.js

@@ -1,3 +1,4 @@
+
 function editNav() {
   var x = document.getElementById("myTopnav");
   if (x.className === "topnav") {
@@ -13,6 +14,8 @@ const modalBtn = document.querySelectorAll(".modal-btn");
 const formData = document.querySelectorAll(".formData");
 const closeBtn = document.querySelector(".close");
 
+const form = document.querySelector("form");
+
 // launch modal event
 modalBtn.forEach((btn) => btn.addEventListener("click", launchModal));
 
@@ -22,7 +25,172 @@ function launchModal() {
 }
 
 // closing modal event
-closeBtn.addEventListener("click", function(){
+
+closeBtn.addEventListener("click", function () {
   modalbg.style.display = "none"
 });
 
+// Soumission du formulaire
+form.addEventListener('submit', function (event) {
+  event.preventDefault(); // Empêche le rechargement de la page
+
+  let isValid = true; // Vérifier la validiter du formulaire
+
+  // Vérification de chaque champ du formulaire
+  if (validateFirstName() === false) {
+    isValid = false;
+  }
+  if (validateLastName() === false) {
+    isValid = false;
+  }
+  if (validateEmail() === false) {
+    isValid = false;
+  }
+  if (validateBirthdate() === false) {
+    isValid = false;
+  }
+  if (validateQuantity() === false) {
+    isValid = false;
+  }
+  if (validateLocation() === false) {
+    isValid = false;
+  }
+  if (validateConditions() === false) {
+    isValid = false;
+  }
+
+  newsletterSignup(); // Enregistrement de la préférence pour la newsletter, ne change pas la validité
+
+  // Affichage du résultat de la validation du formulaire
+  if (isValid === true) {
+    console.log("Le formulaire est validé.");
+  } else {
+    console.log("Le formulaire contient des erreurs. La soumission est bloquée.");
+  }
+});
+
+// Fonctions de validation pour chaque champ du formulaire, chaque fonction
+function validateFirstName() {
+  const firstNameInput = document.getElementById("first")
+  const firstName = firstNameInput.value.trim(); // Supprime les espaces blancs avant et après
+  // Vérifie que le prénom contient au moins 2 caractères
+  if (firstName.length < 2) {
+    console.log("Le prénom doit contenir au moins 2 caractères.");
+    return false;
+  } else {
+    console.log("Le champ prénom est valide.");
+    return true;
+  }
+}
+
+function validateLastName() {
+  const lastNameInput = document.getElementById("last");
+  const lastName = lastNameInput.value.trim();
+  // Vérifie que le nom contient au moins 2 caractères
+  if (lastName.length < 2) {
+    console.log("Le prénom doit contenir au moins 2 caractères.");
+    return false;
+  } else {
+    console.log("Le champ nom est valide.");
+    return true;
+  }
+
+}
+
+function validateEmail() {
+  const emailInput = document.getElementById("email");
+  const email = emailInput.value.trim();
+  // Utilise une expression régulière pour valider l'email
+  const regex = new RegExp("[a-z0-9._-]+@[a-z0-9._-]+\.[a-z0-9._-]+");
+  const isEmailValid = regex.test(email); // test regex
+
+  if (isEmailValid === false) {
+    console.log("L'email est invalide");
+    return false;
+  } else {
+    console.log("L'email est valide");
+    return true;
+  }
+}
+
+function validateBirthdate() {
+  const birthdateInput = document.getElementById("birthdate");
+  const birthdate = birthdateInput.value;
+
+  const convertBirthdate = new Date(birthdate) //convertir la date de naissance en objet Date
+  const today = new Date();// récuperer la date du jour 
+
+  // Vérifie que la date de naissance est bien remplie et antérieure à la date actuelle
+  if (birthdate === "") {
+    console.log("La date de naissance est vide");
+    return false;
+  } else if (convertBirthdate >= today) {
+    console.log("La date de naissance doit être inférieure à la date d'aujourd'hui");
+    return false;
+  } else {
+    console.log("La date de naissance est remplie");
+    return true;
+  }
+}
+
+function validateQuantity() {
+  const quantityInput = document.getElementById("quantity");
+  const quantity = quantityInput.value;
+
+  // Vérifie que la quantité est un nombre
+  if (quantity === "") {
+    console.log("Le champ quantité est vide");
+    return false;
+  } else if (isNaN(quantity)) {
+    console.log("Merci d'entrer une valeur numérique");
+    return false;
+  } else {
+    console.log("Le champ quantité est rempli");
+    return true;
+  }
+}
+
+function validateLocation() {
+  let locationTag = document.querySelectorAll('input[name="location"]');
+  let locationSelected = false;
+
+
+  // Vérifie qu'une option de localisation est sélectionnée
+  for (let i = 0; i < locationTag.length; i++) {
+    if (locationTag[i].checked) {
+      locationSelected = true;
+      break;
+    }
+  }
+  if (locationSelected === false) {
+    console.log("Aucune localisation sélectionnée");
+    return false;
+  } else {
+    console.log("Une localisation est sélectionnée");
+    return true;
+  }
+}
+
+function validateConditions() {
+  let conditionsCheckbox = document.getElementById("checkbox1");
+
+  // Vérifie que les conditions d'utilisation sont acceptées
+  if (conditionsCheckbox.checked) {
+    console.log("Vous avez bien accepté les conditions d'utilisations.")
+    return true;
+  } else {
+    console.log("Vous devez accepter les conditions d'utilisation.")
+    return false;
+  }
+}
+
+function newsletterSignup() {
+  // Enregistre si l'utilisateur souhaite être notifié des prochains événements
+  let newsletterCheckbox = document.getElementById("checkbox2");
+
+  if (newsletterCheckbox.checked) {
+    console.log("Vous avez accepté d'être prévenu des prochains évènements.")
+  } else {
+    console.log("Vous n'avez pas accepté d'être prévenu des prochains évènements.")
+  }
+}