issue OpenClassrooms-Student-Center#2 submit (no complet)

AVillaume · Apr 29, 2021 · d0105b1 · d0105b1
1 parent 6a5be56
commit d0105b1
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 32 deletions.
diff --git a/starterOnly/index.html b/starterOnly/index.html
@@ -113,7 +113,7 @@ <h1 class="hero-headline">
                 class="formData">
                 <input
                   class="checkbox-input"
-                  type="radio"
+                  type="checkbox"
                   id="location1"
                   name="location"
                   value="New York"
@@ -124,7 +124,7 @@ <h1 class="hero-headline">
                 >
                 <input
                   class="checkbox-input"
-                  type="radio"
+                  type="checkbox"
                   id="location2"
                   name="location"
                   value="San Francisco"
@@ -135,7 +135,7 @@ <h1 class="hero-headline">
                 >
                 <input
                   class="checkbox-input"
-                  type="radio"
+                  type="checkbox"
                   id="location3"
                   name="location"
                   value="Seattle"
@@ -146,7 +146,7 @@ <h1 class="hero-headline">
                 >
                 <input
                   class="checkbox-input"
-                  type="radio"
+                  type="checkbox"
                   id="location4"
                   name="location"
                   value="Chicago"
@@ -157,7 +157,7 @@ <h1 class="hero-headline">
                 >
                 <input
                   class="checkbox-input"
-                  type="radio"
+                  type="checkbox"
                   id="location5"
                   name="location"
                   value="Boston"
@@ -168,7 +168,7 @@ <h1 class="hero-headline">
                 >
                 <input
                   class="checkbox-input"
-                  type="radio"
+                  type="checkbox"
                   id="location6"
                   name="location"
                   value="Portland"
@@ -192,7 +192,9 @@ <h1 class="hero-headline">
                   J'ai lu et accepté les conditions d'utilisation.
                 </label>
                 <br>
-                <input class="checkbox-input" type="checkbox" id="checkbox2" />
+                <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.

diff --git a/starterOnly/modal.js b/starterOnly/modal.js
@@ -11,6 +11,7 @@ function editNav() {
 
 const modalbg = document.querySelector(".bground");
 const modalBtn = document.querySelectorAll(".modal-btn");
+const form = document.querySelector("#form");
 const formData = document.querySelectorAll(".formData");
 const closeX = document.querySelector(".close");
 
@@ -22,14 +23,94 @@ const email = document.querySelector("#email");
 const birthdate = document.querySelector("#birthdate");
 const quantity = document.querySelector("#quantity");
 
+const loc1 = document.querySelector("#location1");
+const loc2 = document.querySelector("#location2");
+const loc3 = document.querySelector("#location3");
+const loc4 = document.querySelector("#location4");
+const loc5 = document.querySelector("#location5");
+const loc6 = document.querySelector("#location6");
+
+const checkBox1 = document.querySelector("#checkbox1");
+const checkBox2 = document.querySelector("#checkbox2");
+
 //Regex
 
 const textInput = /^[a-zA-Z]{1,}[^0-9.+*/$%µ!§:;,?={}²&~"#()`@]$/;
-const numberInput = /[0-9]/;
+const numberInput = /^[0-9]{1,}/;
 const mailInput = /^([a-zA-Z0-9_\.-]+\@[\da-z\.-]+\.[a-z\.]{2,6})$/;
 
-// Form Validation
+// launch modal event
+
+modalBtn.forEach((btn) => btn.addEventListener("click", launchModal));
+
+// launch modal form
+
+function launchModal() {
+  modalbg.style.display = "block";
+}
+
+//Close modal on click
 
+closeX.addEventListener("click", function() {
+  modalbg.style.display = "none";
+});
+
+// Submit Form
+
+form.addEventListener('submit', (e) => {
+  e.preventDefault();
+  let erreur;
+  if (first.value != first.value.test(textInput)) {
+    erreur = "Veuillez renseigner un prénom valide";
+    console.log("Veuillez renseigner un prénom valide");
+  } else if (last.value != last.value.test(textInput)) {
+    erreur = "Veuillez renseigner un nom valide";
+    console.log("Veuillez renseigner un nom valide");
+  } else if (email.value != email.value.test(mailInput)) {
+  erreur = "Veuillez renseigner une adresse mail valide";
+  console.log("Veuillez renseigner une adresse mail valide");
+  } else if (quantity.value != quantity.value.test(numberInput)) {
+  erreur = "Veuillez indiquer le nombre de participation";
+  console.log("Veuillez indiquer le nombre de participation");
+  } else if (
+  !loc1.checked &&
+  !loc2.checked &&
+  !loc3.checked &&
+  !loc4.checked &&
+  !loc5.checked &&
+  !loc6.checked
+  ) {
+    erreur = "Veuillez selectionner une ville";
+    console.log("Veuillez selectionner une ville");
+  } else if (!checkBox1.checked) {
+    erreur = "Veuillez acceptez les conditions générales d'utilisation";
+    console.log("Vous devez accepter les conditions générales d'utilisation");
+  }
+    if (
+      first.value &&
+      last.value &&
+      email.value &&
+      birthdate.value &&
+      quantity.value &&
+      loc1.checked ||
+      loc2.checked ||
+      loc3.checked ||
+      loc4.checked ||
+      loc5.checked ||
+      loc6.checked &&
+      checkBox1.checked 
+    ) {
+      alert("SUCCESS");
+    } else {
+      e.preventDefault();
+      formData.innerHTML = erreur;
+      return 0;
+    }
+});
+
+
+// Form Validation
+//
 // First Name
 
 first.addEventListener("input", function(e) {
@@ -82,7 +163,7 @@ last.addEventListener("keyup", function(e) {
   }
 });
 
-/* Email */
+// Email
 
 email.addEventListener("input", function(e) {
   let value = e.target.value;
@@ -108,7 +189,7 @@ email.addEventListener("keyup", function(e) {
   }
 });
 
-/* Quantity */
+// Quantity
 
 quantity.addEventListener("input", function(e){
   let value = e.target.value;
@@ -132,24 +213,3 @@ quantity.addEventListener("keyup", function(e) {
     return false;
   }
 });
-
-
-// launch modal event
-
-modalBtn.forEach((btn) => btn.addEventListener("click", launchModal));
-
-// launch modal form
-
-function launchModal() {
-  modalbg.style.display = "block";
-}
-
-//Close modal on click
-
-closeX.addEventListener("click", function() {
-  modalbg.style.display = "none";
-});
-
-
-
-