Ajouter validation ou messages d'erreur

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.css

@@ -210,12 +210,12 @@ input {
 }
 .formData[data-error]::after {
   content: attr(data-error);
-  font-size: 0.4em;
+  font-size: 0.5em;
   color: #e54858;
   display: block;
   margin-top: 7px;
-  margin-bottom: 7px;
-  text-align: right;
+  margin-bottom: 15px;
+  text-align: left;
   line-height: 0.3;
   opacity: 0;
   transition: 0.3s;

starterOnly/modal.js

@@ -7,10 +7,23 @@ 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 birthDate = document.getElementById('birthdate');
+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 +33,156 @@ 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;
+    const birthDateValue = birthDate.value;
+
+    if (
+      firstIsValid(firstValue) 
+      && lastIsValid(lastValue) 
+      && mailIsValid(mailValue) 
+      && birthDateIsValid(birthDateValue)
+      && 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) => {
+  removeErrorMessage(first);
+  if (firstValue.trim().length < 2) {
+    console.log('Le prénom doit contenir au moins deux caractères');
+    setErrorMessage(first, 'Le prénom doit contenir au moins deux caractères');
+    return false;
+  } else {
+    const result = regexName.test(firstValue);
+     if (result) {
+      removeErrorMessage(first);
+      return true;
+     }
+     else {
+      console.log('Le prénom doit contenir que des lettres');
+      setErrorMessage(first, 'Le prénom doit contenir que des lettres');
+      return false;
+     }
+  }
+}
+
+//fonction pour valider le nom
+const lastIsValid = (lastValue) => {
+  removeErrorMessage(last);
+  if (lastValue.trim().length < 2) {
+    console.log('Le nom doit contenir au moins deux caractères');
+    setErrorMessage(last, 'Le nom doit contenir au moins deux caractères');
+    return false;
+  } else {
+    const result = regexName.test(lastValue);
+     if (result) {
+      removeErrorMessage(last);
+      return true;
+     }
+     else {
+      console.log('Le nom doit contenir que des lettres');
+      setErrorMessage(last, 'Le nom doit contenir que des lettres');
+      return false;
+     }
+  }
+}
+// fonction de validation de mail
+ const mailIsValid = (mailValue) => {
+  const result = regexEmail.test(mailValue);
+  if (result) {
+    removeErrorMessage(mail);
+    return true ;
+  }
+  else{
+    console.log('Veuillez entrer une adresse mail valide');
+    setErrorMessage(mail, 'Veuillez entrer une adresse mail valide');
+    return false;
+  }
+ }
+ // vérification de date de naissance 
+ const birthDateIsValid = (birthDateValue) => {
+   if( birthDateValue === "") {
+    console.log('veuillez entrer votre date de naissance');
+    setErrorMessage(birthDate, 'veuillez entrer votre date de naissance');
+    return false;
+   }
+   else {
+    removeErrorMessage(birthDate);
+    return true ;
+   }
+
+ }
 
+ // vérification nombre de concours
+ const quantityIsValid = (quantityValue) => {
+  if (regexQuantity.test(quantityValue)) {
+    removeErrorMessage(quantity);
+    return true;
+  }
+   else {
+    console.log('Veuillez choisir un nombre de concours entre 0 et 99');
+    setErrorMessage(quantity, '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) {
+        removeErrorMessage(locations[locations.length - 1]);
+        return true; 
+        break; 
+      }
+  }
+  console.log('Veuillez séléctionner un tournoi');
+  setErrorMessage(locations[locations.length - 1], 'Veuillez séléctionner un tournoi');
+  return false; 
+}
+
+// vérification de chekbox
+const conditionsIsChecked =() => {
+   if (checkbox1.checked){
+    removeErrorMessage(checkbox1);
+    return  true;
+   }
+   else {
+    console.log('veuillez accepter les conditions générales');
+    setErrorMessage(checkbox1, 'veuillez accepter les conditions générales');
+    return false;
+   }
+}
+
+//fonction pour ajouter des messages d'erreurs
+const setErrorMessage = (element, message) => {
+  element.parentElement.setAttribute('data-error-visible', 'true');
+  element.parentElement.setAttribute('data-error', message);
+}
+//fonction pour enlever les messages d'erreurs
+const removeErrorMessage = (element) => {
+  element.parentElement.removeAttribute('data-error-visible');
+  element.parentElement.removeAttribute('data-error');
+}