Implémenter entrées du formulaire #2

starterOnly/index.html

@@ -60,11 +60,11 @@ <h1 class="hero-headline">
               name="reserve"
               action="index.html"
               method="get"
-              onsubmit="return validate();"
+              novalidate
             >
               <div
                 class="formData">
-                <label>Prénom</label><br>
+                <label for="first">Prénom</label><br>
                 <input
                   class="text-control"
                   type="text"
@@ -75,17 +75,18 @@ <h1 class="hero-headline">
               </div>
               <div
                 class="formData">
-                <label>Nom</label><br>
+                <label for="last">Nom</label><br>
                 <input
                   class="text-control"
                   type="text"
                   id="last"
                   name="last"
+                  minlength="2"
                 /><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 +96,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 +106,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>
@@ -185,7 +186,6 @@ <h1 class="hero-headline">
                   class="checkbox-input"
                   type="checkbox"
                   id="checkbox1"
-                  checked
                 />
                 <label class="checkbox2-label" for="checkbox1" required>
                   <span class="checkbox-icon"></span>
@@ -195,7 +195,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

@@ -7,10 +7,22 @@ function editNav() {
   }
 }
 
+// REGEX
+const regexName = new RegExp("^[a-zA-Z]+$");
+const regexEmail = new RegExp("^[a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z]{2,}$");
+const regexQuantity = new RegExp("^[0-9]{1,2}$");
+
 // DOM Elements
 const modalbg = document.querySelector(".bground");
 const modalBtn = document.querySelectorAll(".modal-btn");
 const formData = document.querySelectorAll(".formData");
+const modalClose = document.querySelector(".close");
+const first = document.getElementById('first');
+const last = document.getElementById('last');
+const mail = document.getElementById('email');
+const quantity = document.getElementById('quantity');
+const locations = document.querySelectorAll('input[name="location"]');
+const checkbox1 = document.getElementById('checkbox1');
 
 // launch modal event
 modalBtn.forEach((btn) => btn.addEventListener("click", launchModal));
@@ -20,4 +32,104 @@ function launchModal() {
   modalbg.style.display = "block";
 }
 
+//close modal event
+modalClose.addEventListener("click", () => {
+  modalbg.style.display = "none";
+});
+
+const form = document.querySelector('form');
+
+// Ajout d'un écouteur d'événement sur le formulaire pour écouter le submit
+form.addEventListener("submit", (event) => {
+    // On empêche le comportement par défaut
+    event.preventDefault();
+    // On fait la vérification des champs
+    const firstValue = first.value;
+    const lastValue = last.value;
+    const mailValue = mail.value;
+    const quantityValue = quantity.value;
+
+    if (firstIsValid(firstValue) && lastIsValid(lastValue) && mailIsValid(mailValue) && quantityIsValid(quantityValue) && radioBtnIsSelected() && conditionsIsChecked()) {
+      console.log("Merci pour votre inscription !");
+    } else {
+      console.log("Le formulaire est invalide");
+      return;
+    }  
+
+});
 
+//fonction pour valider le prénom
+const firstIsValid = (firstValue) => {
+  if (firstValue.trim().length < 2) {
+    console.log('Le prénom doit contenir au moins deux caractères');
+    return false;
+  } else {
+    const result = regexName.test(firstValue);
+     if (result) {
+      return true;
+     }
+     else {
+      console.log('Le prénom doit contenir que des lettres');
+      return false;
+     }
+  }
+}
+
+//fonction pour valider le nom
+const lastIsValid = (lastValue) => {
+  if (lastValue.trim().length < 2) {
+    console.log('Le nom doit contenir au moins deux caractères');
+    return false;
+  } else {
+    const result = regexName.test(lastValue);
+     if (result) {
+      return true;
+     }
+     else {
+      console.log('Le nom doit contenir que des lettres');
+      return false;
+     }
+  }
+}
+// fonction de validation de mail
+ const mailIsValid = (mailValue) => {
+  const result = regexEmail.test(mailValue);
+  if (result) {
+    return true ;
+  }
+  else{
+    console.log('Veuillez entrer une adresse mail valide');
+    return false;
+  }
+ }
+ // vérification nombre de concours
+ const quantityIsValid = (quantityValue) => {
+  if (regexQuantity.test(quantityValue)) {
+    return true;
+  }
+   else {
+    console.log('Veuillez choisir un nombre de concours entre 0 et 99');
+    return false;
+   }
+ }
+ // vérification du button radio
+const radioBtnIsSelected = () => {
+    for (let i = 0; i < locations.length; i++) {
+        if (locations[i].checked) {
+            return true;
+            break;
+        }
+    }
+    console.log('Veuillez séléctionner un tournoi');
+    return false;
+}
+// vérification de chekbox
+const conditionsIsChecked =() => {
+   if (checkbox1.checked){
+    return  true;
+   }
+   else {
+    console.log('veuillez accepter les conditions générales');
+    return false;
+   }
+}