Entry form validation

README.md

@@ -1,5 +1,3 @@
 # Projet GameOn
-1. Forkez ce repo ;
-2. Il est conseillé d'utiliser VisualStudio Code et vous pouvez utiliser Docker, mais ce n'est pas obligatoire ;
-3. Il n'y a aucune dépendance ;
-4. Vous ne devez utiliser que du CSS personnalisé et du JavaScript pur, sans jQuery, Bootstrap ou autre librairie.
+
+🎉 Starting project on 13/02/2024

starterOnly/index.html

@@ -60,11 +60,12 @@ <h1 class="hero-headline">
               name="reserve"
               action="index.html"
               method="get"
-              onsubmit="return validate();"
+              onsubmit="return isFormValid()"
+              id="reserveForm"
             >
               <div
                 class="formData">
-                <label>Prénom</label><br>
+                <label for="first">Prénom</label><br>
                 <input
                   class="text-control"
                   type="text"
@@ -75,7 +76,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 +86,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 +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>

starterOnly/modal.js

@@ -1,23 +1,149 @@
 function editNav() {
-  var x = document.getElementById("myTopnav");
-  if (x.className === "topnav") {
-    x.className += " responsive";
+  var x = document.getElementById('myTopnav');
+  if (x.className === 'topnav') {
+    x.className += ' responsive';
   } else {
-    x.className = "topnav";
+    x.className = 'topnav';
   }
 }
 
 // DOM Elements
-const modalbg = document.querySelector(".bground");
-const modalBtn = document.querySelectorAll(".modal-btn");
-const formData = document.querySelectorAll(".formData");
+const modalbg = document.querySelector('.bground');
+const modalBtn = document.querySelectorAll('.modal-btn');
+const formData = document.querySelectorAll('.formData');
+const closeBtn = document.querySelector('.close');
 
 // launch modal event
-modalBtn.forEach((btn) => btn.addEventListener("click", launchModal));
+modalBtn.forEach((btn) => btn.addEventListener('click', launchModal));
 
 // launch modal form
 function launchModal() {
-  modalbg.style.display = "block";
+  modalbg.style.display = 'block';
 }
 
+// Close modal event
+closeBtn.addEventListener('click', closeModal);
 
+// Close modal form
+function closeModal() {
+  modalbg.style.display = 'none';
+}
+
+// DOM Elements form validation
+const form = document.getElementById('reserveForm');
+const firstName = document.getElementById('first');
+const lastName = document.getElementById('last');
+const email = document.getElementById('email');
+const birthdate = document.getElementById('birthdate');
+const quantity = document.getElementById('quantity');
+
+const checkbox1 = document.getElementById('checkbox1');
+const checkbox2 = document.getElementById('checkbox2');
+const submit = document.getElementById('submit');
+
+// First name
+function validateFirstName() {
+  if (firstName.value.length < 2) {
+    return false;
+  } else {
+    return true;
+  }
+}
+
+// Last name
+function validateLastName() {
+  if (lastName.value.length < 2) {
+    return false;
+  } else {
+    return true;
+  }
+}
+
+// Email
+function validateEmail() {
+  const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
+  if (!emailRegex.test(email.value)) {
+    return false;
+  } else {
+    return true;
+  }
+}
+
+// Birthdate
+function validateBirthdate() {
+  if (birthdate.value.trim() !== '') {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+// Quantity
+function validateQuantity() {
+  if (isNaN(quantity.value) && quantity.value < 0) {
+    return false;
+  } else {
+    return true;
+  }
+}
+
+// Checkbox Location
+function validateCheckboxLocation() {
+  const locationCheckBoxes = document.getElementsByName('location');
+  let checkedValue = null;
+
+  locationCheckBoxes.forEach((checkbox) => {
+    if (checkbox.checked) {
+      checkedValue = checkbox.value;
+    }
+  });
+
+  if (checkedValue === null) {
+    return false;
+  } else {
+    return checkedValue;
+  }
+}
+
+// Checkbox Terms of use
+function validateCheckboxTerms() {
+  if (!checkbox1.checked) {
+    return false;
+  } else {
+    return true;
+  }
+}
+
+// Form validation
+
+form.addEventListener('submit', function (e) {
+  e.preventDefault();
+  isFormValid();
+});
+
+// Is Form Valid
+
+function isFormValid() {
+  if (
+    validateFirstName() &&
+    validateLastName() &&
+    validateEmail() &&
+    validateQuantity() &&
+    validateCheckboxLocation() &&
+    validateCheckboxTerms() &&
+    validateBirthdate()
+  )
+    console.log(
+      firstName.value,
+      lastName.value,
+      email.value,
+      birthdate.value,
+      quantity.value,
+      validateCheckboxLocation(),
+      checkbox1.checked,
+      checkbox2.checked
+    );
+  else {
+    console.log('not valid');
+  }
+}