finish Form

starterOnly/index.html

@@ -54,17 +54,17 @@ <h1 class="hero-headline">
 
       <div class="bground">
         <div class="content">
-          <span class="close"></span>
+          <span class="close" onclick="closeModal()"></span>
           <div class="modal-body">
             <form
               name="reserve"
               action="index.html"
               method="get"
-              onsubmit="return validate();"
+              onsubmit="return validate(event);"
             >
               <div
                 class="formData">
-                <label>Prénom</label><br>
+                <label for="first">Prénom</label><br>
                 <input
                   class="text-control"
                   type="text"
@@ -75,7 +75,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 +85,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 +95,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 +105,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>

starterOnly/modal.css

@@ -97,7 +97,6 @@ img {
   .topnav a.icon {
     float: right;
     display: block;
-    margin-top: -15px;
   }
 } 
 

starterOnly/modal.js

@@ -20,4 +20,95 @@ function launchModal() {
   modalbg.style.display = "block";
 }
 
+//function close Modal
+function closeModal() {
+  modalbg.style.display = "none";
+}
+
+// validate form
+function validate(event) {
+  if (event) {
+    event.preventDefault(); // empêche le reload de la page
+  }
+  let formIsValid = true;
+
+  const form = document.forms["reserve"];
+  const first = document.querySelector("#first").value.trim();
+  const last = document.querySelector("#last").value.trim();
+  const email = document.querySelector("#email").value.trim();
+  const birthdate = document.querySelector("#birthdate").value.trim();
+  const quantity = document.querySelector("#quantity").value.trim();
+  const location = document.querySelector('input[name="location"]:checked');
+  const conditions = document.querySelector("#checkbox1").checked;
+
+  clearErrors(form);
+
+  if (first === null || first.length < 2) {
+    formIsValid = false;
+    showError(
+      "#first",
+      "Veuillez entrer 2 caractères ou plus pour le champ du nom."
+    );
+  }
+
+  if (last === null || last.length < 2) {
+    formIsValid = false;
+    showError(
+      "#last",
+      "Veuillez entrer 2 caractères ou plus pour le champ du nom."
+    );
+  }
+
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  if (!emailRegex.test(email)) {
+    formIsValid = false;
+    showError("#email", "Veuillez entrer une adresse email valide.");
+  }
+
+  if (!birthdate) {
+    formIsValid = false;
+    showError("#birthdate", "Vous devez entrer votre date de naissance.");
+  }
 
+  if (quantity === "" || isNaN(quantity) || Number(quantity) < 0) {
+    formIsValid = false;
+    showError("#quantity", "Veuillez entrer un nombre valide.");
+  }
+
+  if (!location) {
+    formIsValid = false;
+    showError('input[name="location"]', "Vous devez choisir une option.");
+  }
+
+  if (!conditions) {
+    formIsValid = false;
+    showError(
+      "#checkbox1",
+      "Vous devez vérifier que vous acceptez les termes et conditions."
+    );
+  }
+
+  if (formIsValid) {
+    form.submit();
+    alert("Merci ! Votre réservation a été reçue.");
+  }
+}
+
+//error message function
+function showError(selector, message) {
+  const input = document.querySelector(selector);
+  const error = document.createElement("span");
+  error.classList.add("error");
+  error.innerText = message;
+  error.style.color = "red";
+  error.style.fontSize = "14px";
+  error.style.marginTop = "4px";
+  error.style.display = "block";
+  input.insertAdjacentElement("afterend", error);
+}
+
+// clear errors function
+function clearErrors(form) {
+  // Supprime tous les spans d'erreur
+  form.querySelectorAll(".error").forEach((el) => el.remove());
+}