OpenClassrooms-Student-Center#4 Ajouter confirmation quand envoie ré…

…ussi

starterOnly/index.html

@@ -58,9 +58,8 @@ <h1 class="hero-headline">
           <div class="modal-body">
             <form
               name="reserve"
-              action="index.html"
-              method="get"
-              onsubmit="return validate();"
+
+
             >
               <div
                 class="formData">
@@ -216,11 +215,12 @@ <h1 class="hero-headline">
               </div>
               <input
                 class="btn-submit"
-                type="submit"
+                type="button"
                 class="button"
                 value="C'est parti"
-
+                id ="btn-envoie"
               />
+              <span id = "validation-ok"></span>
             </form>
           </div>
         </div>

starterOnly/modal.js

@@ -18,6 +18,7 @@ const formData = document.querySelectorAll(".formData");
 const closeFormulaire = document.querySelectorAll(".close");
 
 
+
 // Liaison des labels
 const prenom = document.getElementById("first");
 const prenom_m = document.getElementById("prenom_erreur");
@@ -39,99 +40,130 @@ const location_m = document.getElementById("location_manquant");
 const checkbox1 = document.getElementById("checkbox1");
 const checkbox2 = document.getElementById("checkbox2");
 const condition_m = document.getElementById("condition_erreur");
-;
 
+const validation = document.getElementById("btn-envoie");
+const validation_ok = document.getElementById("validation-ok");
 
 
 
 var mailCaractere = /^([a-z0-9_\.-]+\@[\da-z\.-]+\.[a-z\.]{2,6})$/;
+var prenomValidation = /^[a-zA-Zéèîï][a-zéèêàçîï]+([-'\s][a-zA-Zéèîï][a-zéèêàçîï]+)?/;
+var nomValidation = /^[a-zA-Zéèîï][a-zéèêàçîï]+([-'\s][a-zA-Zéèîï][a-zéèêàçîï]+)?/;
+var tournoisValidation =/^[0-9][0-9]?$|^999$/;
+var naissanceValidation = /^([0-9]{2})|([0-9]{2})|([0-9]{4})$/;
 
 // launch modal event
 modalBtn.forEach((btn) => btn.addEventListener("click", launchModal));
 
 //fermer l'evenement formulaire
 closeFormulaire.forEach((X) => X.addEventListener("click",fermerModal));
 
+// event de type click
+validation.addEventListener("click",validate); 
 
 // launch modal form
 function launchModal() {
   modalbg.style.display = "block";
 }
 
 function fermerModal(){
+  validation_ok.innerHTML="";
   modalbg.style.display = "none";
 }
 
 
 
 
 function validate () {
-
-  if (prenom.value === '' || prenom.value.length< 2)
+  
+  if (prenom.value === '' || prenom.value.length <2)
 
   {
-    prenom_m.textContent = "Veuillez entrer 2 caractères ou plus pour le champ du prénom.";
+    prenom_m.innerHTML = "Veuillez entrer 2 caractères ou plus pour le champ du prénom.";
     prenom_m.style.fontSize = "14px";
-    event.preventDefault();
+    prenom_m.style.color="red";
+
+  }else if(prenomValidation.test(prenom.value.trim()) == false){
+    prenom_m.innerHTML  = "Veuillez entrez un prénom correct ";
+    prenom_m.style.fontSize = "14px";
+    prenom_m.style.color="red";
+
   }
   else{
-    prenom_m.textContent = "";
+    prenom_m.innerHTML  = "";
   }
 
 
-  if (nom.value === '' || nom.value.length < 2)
+  if (nom.value === '' || nom.value.length <2)
   {
-    nom_m.textContent = "Veuillez entrer 2 caractères ou plus pour le champ du nom."; 
+    nom_m.innerHTML  = "Veuillez entrer 2 caractères ou plus pour le champ du nom."; 
+    nom_m.style.fontSize = "14px";
+    nom_m.style.color="red";
+
+  }else if (nomValidation.test(nom.value.trim()) == false){
+    nom_m.innerHTML  = "Veuillez entrez un nom correct";
     nom_m.style.fontSize = "14px";
-    event.preventDefault();
+    nom_m.style.color="red";
+
   }else{
-    nom_m.textContent = "";
+    nom_m.innerHTML  = "";
   }
 
-  if (naissance.value ===''){
-    naissance_m.textContent= "Veuillez entrez votre date de naissance";
+  if (naissance.value ==='' || (naissanceValidation.test(naissance.value) == false)){
+    naissance_m.innerHTML = "Veuillez entrez votre date de naissance";
     naissance_m.style.fontSize = "14px";
-    event.preventDefault();
+    naissance_m.style.color="red";
+
   }
   else{
-    naissance_m.textContent = "";
+    naissance_m.innerHTML = "";
   }
 
-  if (nombreTournois.value === ''){
-    nombreTournois_m.textContent = "Veuillez entrer le nombre de tournois participé";
+  if (nombreTournois.value === '' || tournoisValidation.test(nombreTournois.value) == false){
+    nombreTournois_m.innerHTML  = "Veuillez entrer le nombre de tournois participé";
     nombreTournois_m.style.fontSize = "14px";
-    event.preventDefault();
-  }
-  else{
-    nombreTournois_m.textContent = "";
+    nombreTournois_m.style.color="red";
+    
+  }else{
+    nombreTournois_m.innerHTML  = "";
   }
 
   if(mailCaractere.test(email.value)){
-    email_m.textContent = "";
+    email_m.innerHTML  = "";
   }
   else{
-    email_m.textContent =" Veuillez entrer un email correct";
+    email_m.innerHTML  =" Veuillez entrer un email correct";
     email_m.style.fontSize = "14px";
-    event.preventDefault();
+    email_m.style.color="red";
+
   }
 
   if ((location1.checked)|| (location2.checked) || (location3.checked)
     ||(location4.checked) ||(location5.checked) ||(location6.checked)) {
-    location_m.textContent = "";
+    location_m.innerHTML  = "";
   }
   else{
-    location_m.textContent = "Vous devez choisir une option";
-    location_m.style.fontSize = "14px"; 
-    event.preventDefault();
+    location_m.innerHTML  = "Vous devez choisir une option";
+    location_m.style.fontSize = "14px";
+    location_m.style.color="red"; 
+
   }
 
   if(checkbox1.checked){
-    condition_m = "";
+    condition_m.innerHTML  = "";
   }
   else{
-    condition_m.textContent ="Vous devez vérifier que vous acceptez les termes et conditions";
+    condition_m.innerHTML  ="Vous devez vérifier que vous acceptez les termes et conditions";
     condition_m.style.fontSize = "14px";
-    event.preventDefault();
+    condition_m.style.color="red"; 
+
   }
-
-}
+  if (prenom.value && nom.value && naissance.value &&
+    nombreTournois.value && email.value && ((location1.checked)|| 
+    (location2.checked) || (location3.checked)||(location4.checked) ||
+    (location5.checked) ||(location6.checked)) && checkbox1.checked === true){
+      validation_ok.innerHTML= "Merci ! Votre réservation a bien été reçue.";
+      validation_ok.style.fontSize = "16px";
+
+    }
+}