Ajouter validation ou messages d'erreur

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

@@ -20,6 +20,7 @@ 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');
@@ -48,8 +49,17 @@ form.addEventListener("submit", (event) => {
     const lastValue = last.value;
     const mailValue = mail.value;
     const quantityValue = quantity.value;
+    const birthDateValue = birthDate.value;
 
-    if (firstIsValid(firstValue) && lastIsValid(lastValue) && mailIsValid(mailValue) && quantityIsValid(quantityValue) && radioBtnIsSelected() && conditionsIsChecked()) {
+    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");
@@ -60,33 +70,41 @@ form.addEventListener("submit", (event) => {
 
 //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;
      }
   }
@@ -95,41 +113,76 @@ const lastIsValid = (lastValue) => {
  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) {
-            return true;
-            break;
-        }
-    }
-    console.log('Veuillez séléctionner un tournoi');
-    return false;
+ 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');
 }