issue OpenClassrooms-Student-Center#2: finalisation de la validation …

…du formulaire
manelgasmi · Jul 31, 2024 · 476e8cb · 476e8cb
1 parent cc1a2ea
commit 476e8cb
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 3 deletions.
diff --git a/starterOnly/index.html b/starterOnly/index.html
@@ -54,11 +54,11 @@ <h1 class="hero-headline">
         <div class="content">
           <button class="close"></button>
           <div class="modal-body">
-            <form
+            <form novalidate
               name="reserve"
               action="index.html"
               method="get"
-              onsubmit="return validate();"
+              onsubmit="return validate(event);"
             >
               <div class="formData">
                 <label for="first">Prénom</label><br />
@@ -77,6 +77,7 @@ <h1 class="hero-headline">
                   type="text"
                   id="last"
                   name="last"
+                  minlength="2"
                 /><br />
               </div>
               <div class="formData">
@@ -189,7 +190,7 @@ <h1 class="hero-headline">
                   type="checkbox"
                   id="checkbox1"
                   checked
-
+                  required
                 />
                 <label class="checkbox2-label" for="checkbox1">
                   <span class="checkbox-icon"></span>

diff --git a/starterOnly/modal.js b/starterOnly/modal.js
@@ -27,5 +27,59 @@ btnClose.addEventListener("click", closeModal);
 // Close modal form
 function closeModal() {
   modalbg.style.display = "none";
+}
+
+// form validation
+function validate(event) {
+  event.preventDefault();
+
+  // First name validation
+  const firstNameInput = document.getElementById("first");
+  const firstName = firstNameInput.value;
+  if (firstName.length < 2) {
+    console.log("Erreur prénom doit être minimum 2 lettres");
+  }
 
+  // Last name validation
+  const lastNameInput = document.getElementById("last");
+  const lastName = lastNameInput.value;
+  if (lastName.length < 2) {
+    console.log("Erreur nom doit être minimum 2 lettres");
+  }
+
+  // email validation
+  const emailInput = document.getElementById("email");
+  let email = emailInput.value;
+  let emailRegExp = new RegExp("[a-z0-9._-]+@[a-z0-9._-]+.[a-z0-9._-]+");
+  if (emailRegExp.test(email)) {
+    console.log("Email valide");
+  } else {
+    console.log("Erreur email non valide");
+  }
+
+  // number of Competition validation
+  const nbrCompetitions = document.getElementById("quantity");
+  const nbr = nbrCompetitions.value;
+  if (nbr < 0 || nbr > 99 || !nbr) {
+    console.log("Erreur nombre de compétition doit être compris entre 0 et 99");
+  }
+
+  // input radio validation
+  let radioInputs = document.querySelectorAll('input[name = "location"]');
+  let locationChecked = false;
+  for (let i = 0; i < radioInputs.length; i++) {
+    if (radioInputs[i].checked) {
+      locationChecked = true;
+      break;
+    }
+  }
+  if(locationChecked === false) {
+    console.log("Erreur vous devez choisir une localisation");
+  }
+
+  // general conditions box validation
+  const generalConditions = document.getElementById("checkbox1");
+  if (generalConditions.checked === false) {
+    console.log("Erreur vous devez accepter les conditions générales");
+  }
 }