feat (input) : check datas and submit (OpenClassrooms-Student-Center#2)

starterOnly/modal.js

@@ -24,10 +24,24 @@ const locationChecked = document.getElementsByName("location");
 const checkbox1 = document.getElementById("checkbox1");
 const checkbox2 = document.getElementById("checkbox2");
 
-// Validation
+// launch modal event
+modalBtn.forEach((btn) => btn.addEventListener("click", launchModal));
 
-// Validation du formulaire
-const formValid = document.getElementById("submit");
+// launch modal form
+function launchModal() {
+  modalbg.style.display = "block";
+}
+
+// close modal event
+closeModalBtn.addEventListener("click", function(event) {
+  event.preventDefault ();
+  closeModal();
+  });
+
+// close modal form
+function closeModal() {
+  bground.style.display = "none";
+}
 
 // Validation du champ Prénom
 // le champ n'est pas vide
@@ -36,9 +50,15 @@ const formValid = document.getElementById("submit");
 // 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")
+function firstNameValid(value) {
+  return /^[\w\sàáâãäåçèéêëìíîïðòóôõöùúûüýÿ]+[-\s\w\sàáâãäåçèéêëìíîïðòóôõöùúûüýÿ]{2,}$,i/.test(value);
+}
+
+// Récupérer la valeur des champs à chaque modification
+input.addEventListener('input', function(event) {
+  output.innerHTML = event.target.value;
+});
 
 // Validation du champ Nom
 // le champ n'est pas vide
@@ -47,29 +67,36 @@ const missFirstName = document.getElementById("missFirst")
 // 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);}
+function lastNameValid(value) {
+  return /^[\w\sàáâãäåçèéêëìíîïðòóôõöùúûüýÿ]+[-'\s\w\sàáâãäåçèéêëìíîïðòóôõöùúûüýÿ]{2,}$,i/.test(value);
+}
 
 // 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 champs contient strictement 1 "@"
 // le nom de domanaine accepte
 // casse indifférente
-const emailValid = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@{1}[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+function emailValid(value) {
+  return /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@{1}[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(value);
+}
 
 // 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}$/;
+function birthdateValid(date) {
+  return /^(0[1-9]|[1-2]\d|3[01])\/(0[1-9]|1[0-2])\/(19|20)\d{2}$/.test(date);
+}
 
 // Validation du nombre de participations
 // quantité comprise entre 0 et 99
-const quantityValid = /^[0-9]$|^[1-9][0-9]$|^(99)$/;
+function quantityValid(value) {
+  return /^[0-9]$|^[1-9][0-9]$|^(99)$/.test(value);
+}
 
 // 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++) {
@@ -81,21 +108,16 @@ function locationValid() {
   return true;
 }
 
-// launch modal event
-modalBtn.forEach((btn) => btn.addEventListener("click", launchModal));
-
-// launch modal form
-function launchModal() {
-  modalbg.style.display = "block";
-}
-
-// close modal event
-closeModalBtn.addEventListener("click", function(event) {
-  event.preventDefault ();
-  closeModal();
-  });
+// Validation du formulaire
+// solution 1
+/*const formValid = document.getElementById("submit");
+formValid.addEventListener("click", validation)
+function validation(event) {
+  event.preventDefault();
+}*/
 
-// close modal form
-function closeModal() {
-  bground.style.display = "none";
-}
+// solution 2
+document.getElementsByName("reserve").addEventListener("submit"), function(e)
+ {
+   e.preventDefault
+ }