From ab7dbb3be14448d0434e271d4a2d0b6e7f2cfec9 Mon Sep 17 00:00:00 2001
From: Amandine Arias <amandine.arias@gmail.com>
Date: Sat, 13 Feb 2021 15:49:28 +0100
Subject: [PATCH] feat (input) : add validation properties (#2)

---
 starterOnly/index.html | 51 ++++++++++++++++-------------
 starterOnly/modal.js   | 73 +++++++++++++++++++++++++++++++++++-------
 2 files changed, 89 insertions(+), 35 deletions(-)

diff --git a/starterOnly/index.html b/starterOnly/index.html
index 6f1aaa8a1d..e56152554a 100644
--- a/starterOnly/index.html
+++ b/starterOnly/index.html
@@ -64,52 +64,57 @@ <h1 class="hero-headline">
               >
               <div
                 class="formData">
-                <label for="firstName" required>Prénom</label><br>
+                <label for="firstName" required>*Prénom</label><br>
                 <input
-                  class="text-control"
-                  type="text"
-                  id="first"
-                  name="first"
+                class="text-control"
+                type="text"
+                id="first"
+                name="first"
                 /><br>
               </div>
               <div
                 class="formData">
-                <label for="lastName" required>Nom</label><br>
+                <label for="lastName" required>*Nom</label><br>
                 <input
-                  class="text-control"
-                  type="text"
-                  id="last"
-                  name="last"
+                class="text-control"
+                type="text"
+                id="last"
+                name="last"
                 /><br>
               </div>
               <div
                 class="formData">
-                <label for="email" required>E-mail</label><br>
+                <label for="email" required>*E-mail</label><br>
                 <input
-                  class="text-control"
-                  type="email"
-                  id="email"
-                  name="email"
-                  /><br>
+                class="text-control"
+                type="email"
+                id="email"
+                name="email"
+                autocapitalize="none"
+                /><br>
               </div>
               <div
                 class="formData">
-                <label for="birthdate" required>Date de naissance</label><br>
+                <label for="birthdate" required>*Date de naissance</label><br>
                 <input
-                  class="text-control"
-                  type="date"
-                  id="birthdate"
-                  name="birthdate"
+                class="text-control"
+                type="date"
+                id="birthdate"
+                name="birthdate"
                 /><br>
               </div>
               <div
                 class="formData">
                 <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">
+                <input
+                type="number"
+                class="text-control"
+                id="quantity"
+                name="quantity">
               </div>
               <p class="text-label">Quelles villes ?</p>
               <div
-                class="formData">
+              class="formData">
                 <input
                   class="checkbox-input"
                   type="radio"
diff --git a/starterOnly/modal.js b/starterOnly/modal.js
index 7f3f307c38..c6070c3784 100644
--- a/starterOnly/modal.js
+++ b/starterOnly/modal.js
@@ -1,7 +1,7 @@
 function editNav() {
   var x = document.getElementById("myTopnav");
   if (x.className === "topnav") {
-    x.className += " responsive";
+    x.className += "responsive";
   } else {
     x.className = "topnav";
   }
@@ -20,18 +20,67 @@ const lastName = document.getElementById("last");
 const email = document.getElementById("email");
 const birthdate = document.getElementById("birthdate");
 const quantity = document.getElementById("quantity");
-const location1 = document.getElementById("location1");
-const location2 = document.getElementById("location2");
-const location3 = document.getElementById("location3");
-const location4 = document.getElementById("location4");
-const location5 = document.getElementById("location5");
-const location6 = document.getElementById("location6");
+const locationChecked = document.getElementsByName("location");
 const checkbox1 = document.getElementById("checkbox1");
 const checkbox2 = document.getElementById("checkbox2");
 
-// Validity
+// Validation
+
+// Validation du formulaire
 const formValid = document.getElementById("submit");
 
+// Validation du champ Prénom
+// le champ n'est pas vide
+// le champ n'est pas remplis de " "
+// le champ contient 2 caractères minimum
+// le champ accepte des mots composés séparés par "-" ; " ")
+// le champ n'accepte pas 2 éléments de séparation consécutifs
+// casse indifférente
+const firstNameValid = /^[\w\sàáâãäåçèéêëìíîïðòóôõöùúûüýÿ]+[-\s\w\sàáâãäåçèéêëìíîïðòóôõöùúûüýÿ]{2,}$,i/;
+function strUcFirst(a){return (a+"").charAt(0).toUpperCase()+a.substr(1);}
+const missFirstName = document.getElementById("missFirst")
+
+// Validation du champ Nom
+// le champ n'est pas vide
+// le champ n'est pas remplis de " "
+// le champ contient 2 caractères minimum
+// le champ accepte des mots composés séparés par "'" ; "-" ; " ")
+// le champ n'accepte pas 2 éléments de séparation consécutifs
+// casse indifférente
+const lastNameValid = /^[\w\sàáâãäåçèéêëìíîïðòóôõöùúûüýÿ]+[-'\s\w\sàáâãäåçèéêëìíîïðòóôõöùúûüýÿ]{2,}$,i/;
+function strUcFirst(a){return (a+"").charAt(0).toUpperCase()+a.substr(1);}
+
+// Validation du champ email (from W3C)
+// le champ n'est pas vide
+// le champ n'est pas remplis de " "
+// tout caractère ASCII accepté
+// espaces et points non acceptés en début ou fin de saisie et si répétés côte à côte
+// le champs contient strictement 1 "@" et 1 "."
+// le nom de domanaine accepte
+// casse indifférente
+const emailValid = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@{1}[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+
+// Validation de la date de naissance
+// format jj/mm/aaaa
+const birthdateValid = /^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(19|20)\d{2}$/;
+
+// Validation du nombre de participations
+// quantité comprise entre 0 et 99
+const quantityValid = /^[0-9]$|^[1-9][0-9]$|^(99)$/;
+
+// Validation de la sélection d'une ville (bouton radio)
+const missLocation = document.getElementById("missLocation")
+function locationValid() {
+	const n = location.length;
+ 	for (const i=0;i<n;i++) {
+
+		if (location[i].checked) {
+      return false;
+		}
+	}
+  return true;
+}
+
 // launch modal event
 modalBtn.forEach((btn) => btn.addEventListener("click", launchModal));
 
@@ -46,7 +95,7 @@ closeModalBtn.addEventListener("click", function(event) {
   closeModal();
   });
 
-  // close modal form
-  function closeModal() {
-    bground.style.display = "none";
-  }
\ No newline at end of file
+// close modal form
+function closeModal() {
+  bground.style.display = "none";
+}
\ No newline at end of file