Issue#4

starterOnly/index.html

@@ -60,32 +60,30 @@ <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"
                   id="first"
-                  name="first"
-                  minlength="2"
+                  name="prénom"
                 /><br>
               </div>
               <div
                 class="formData">
-                <label>Nom</label><br>
+                <label for="last">Nom</label><br>
                 <input
                   class="text-control"
                   type="text"
                   id="last"
-                  name="last"
+                  name="nom"
                 /><br>
               </div>
               <div
                 class="formData">
-                <label>E-mail</label><br>
+                <label for="email">E-mail</label><br>
                 <input
                   class="text-control"
                   type="email"
@@ -95,7 +93,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,11 +103,19 @@ <h1 class="hero-headline">
               </div>
               <div
                 class="formData">
-                <label>À 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">
+                <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>
               <div
+                id="locations"
                 class="formData">
                 <input
                   class="checkbox-input"
@@ -177,25 +183,31 @@ <h1 class="hero-headline">
                   <span class="checkbox-icon"></span>
                   Portland</label
                 >
+                <br>
               </div>
 
               <div
                 class="formData">
-                <input
+                <div id="conditions">
+                  <input
+                    class="checkbox-input"
+                    type="checkbox"
+                    id="checkbox1"
+                  />
+                  <label class="checkbox2-label" for="checkbox1" required>
+                    <span class="checkbox-icon"></span>
+                    J'ai lu et accepté les conditions d'utilisation.
+                  </label>
+                  <br>
+                </div>
+                <input 
                   class="checkbox-input"
-                  type="checkbox"
-                  id="checkbox1"
-                  checked
+                  type="checkbox" 
+                  id="checkbox2" 
                 />
-                <label class="checkbox2-label" for="checkbox1" required>
-                  <span class="checkbox-icon"></span>
-                  J'ai lu et accepté les conditions d'utilisation.
-                </label>
-                <br>
-                <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.css

@@ -14,7 +14,6 @@ body {
   margin: 0;
   display: flex;
   flex-direction: column;
-  background-image: url("background.png");
   font-family: var(--font-default);
   font-size: 18px;
   max-width: 1300px;
@@ -399,6 +398,33 @@ input[data-error]::after {
 .same-as-selected {
   background-color: rgba(0, 0, 0, 0.1);
 }
+
+/* message erreur */
+.error{
+  color: red;
+  border: 1px solid red;
+  box-shadow: 0 0 10px red;
+}
+.error-message{
+  color: red;
+  font-size: medium;
+  margin: 15px;
+}
+
+/* message succes */
+.success-message{
+  height: 74vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 36px;
+  text-align: center;
+}
+.success-message button {
+  position: absolute;
+  bottom: 25px;
+}
+
 /* custom select end */
 .text-label {
   font-weight: normal;
@@ -478,10 +504,11 @@ footer {
   padding-right: 2vw;
   margin: 0 20px;
 }
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 768px) {
   .hero-section {
     display: block;
     box-shadow: unset;
+    min-height: auto;
   }
   .hero-content {
     background: #fff;
@@ -527,3 +554,13 @@ footer {
   }
 }
 
+@keyframes modalclose {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+} 
+
+

starterOnly/modal.js

@@ -7,17 +7,146 @@ function editNav() {
   }
 }
 
-// DOM Elements
 const modalbg = document.querySelector(".bground");
+const modalSuccess = document.querySelector(".modal-body");
 const modalBtn = document.querySelectorAll(".modal-btn");
 const formData = document.querySelectorAll(".formData");
+const closeBtn = document.querySelector(".close");
+const form = document.querySelector("form");
+let champPrenom = document.getElementById("first");
+let champNom = document.getElementById("last");
+let champEmail = document.getElementById("email");
+let champDate = document.getElementById("birthdate");
+let champQuantity = document.getElementById("quantity");
+let radioLocation = document.querySelectorAll("input[name=location]");
+let divLocation = document.getElementById("locations");
+let checkboxConditions = document.getElementById("checkbox1");
+let divConditions = document.getElementById("conditions");
 
 // launch modal event
 modalBtn.forEach((btn) => btn.addEventListener("click", launchModal));
-
+  
 // launch modal form
 function launchModal() {
   modalbg.style.display = "block";
 }
 
+// close modal event
+closeBtn.addEventListener("click", closeModal);
+
+// close modal form
+function closeModal() {
+  modalbg.style.display = "none";
+}
+
+function validerChamp(champ) {
+  if (champ.value.length < 2) {
+      champ.classList.add("error");
+      throw { champ, message: `Le ${champ.name} n'est pas valide (2 caractères minimum).` };
+  }
+  champ.classList.remove("error");
+  return true;
+}
+
+function validerEmail(email) {
+  let emailRegExp = new RegExp("[a-z0-9._-]+@[a-z0-9._-]+\\.[a-z0-9._-]+");
+  if (!emailRegExp.test(email.value)) {
+      email.classList.add("error");
+      throw { champ: email, message: "L'email n'est pas valide." };
+  }
+  email.classList.remove("error");
+  return true;
+}
+
+function validerDate(date) {
+  if (!date.value) {
+      date.classList.add("error");
+      throw { champ: date, message: "Veuillez sélectionner une date." };
+  }
+  date.classList.remove("error");
+  return true;
+}
+
+function validerNombre(quantity) {
+  let regex = new RegExp("^[0-9]+$");
+  if (!regex.test(quantity.value)) {
+      quantity.classList.add("error");
+      throw { champ: quantity, message: "Veuillez indiquer une quantité." };
+  }
+  quantity.classList.remove("error");
+  return true;
+}
+
+function validerLocation(location) {
+  let selected = false;
+
+  for (let i = 0; i < location.length; i++) {
+      if (location[i].checked) {
+          selected = true;
+          break;
+      }
+  }
+
+  if (!selected) {
+      divLocation.classList.add("error");
+      throw { champ: divLocation, message: "Veuillez sélectionner une location." };
+  }
+  divLocation.classList.remove("error");
+  return true;
+}
+
+function validerConditions(condition) {
+  if (!condition.checked) {
+      divConditions.classList.add("error");
+      throw { champ: divConditions, message: "Veuillez accepter les conditions d'utilisation." };
+  }
+  divConditions.classList.remove("error");
+  return true;
+}
 
+function afficherMessageErreur(champ, message) {
+  const errorElement = document.createElement('span');
+  errorElement.className = 'error-message';
+  errorElement.textContent = message;
+
+  if (champ === divLocation || champ === divConditions) {
+      champ.appendChild(errorElement);
+  } else {
+      champ.parentNode.appendChild(errorElement);
+  }
+}
+
+function successMessage() {
+  form.style.display = "none";
+  let divSuccessMessage = `
+    <div class="success-message">
+      <p>Merci pour <br> votre inscription</p>
+      <button id="closeBtn" class="btn-submit">Fermer</button>
+    </div>
+  `;
+  modalSuccess.innerHTML = divSuccessMessage;
+  let successMessageBtn = document.getElementById("closeBtn");
+  successMessageBtn.addEventListener("click", closeModal);
+}
+
+form.addEventListener("submit", (event) => {
+  event.preventDefault();
+
+  // Supprimer les anciens messages d'erreur
+  document.querySelectorAll('.error-message').forEach(span => span.remove());
+
+  try {
+      validerChamp(champPrenom);
+      validerChamp(champNom);
+      validerEmail(champEmail);
+      validerDate(champDate);
+      validerNombre(champQuantity);
+      validerLocation(radioLocation);
+      validerConditions(checkboxConditions);
+      // Si tout est valide, afficher le message de success
+      successMessage();
+  } catch (error) {
+      // Afficher le message d'erreur
+      afficherMessageErreur(error.champ, error.message);
+  }
+});