From 6c698f9477300b01c97f4eff8c2b498c7f8acb4f Mon Sep 17 00:00:00 2001 From: Lionel Medzo Owono Date: Wed, 26 May 2021 14:54:11 +0200 Subject: [PATCH] =?UTF-8?q?=20#4=20Ajouter=20confirmation=20quand=20envoie?= =?UTF-8?q?=20r=C3=A9ussi?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- starterOnly/index.html | 10 ++--- starterOnly/modal.js | 96 ++++++++++++++++++++++++++++-------------- 2 files changed, 69 insertions(+), 37 deletions(-) diff --git a/starterOnly/index.html b/starterOnly/index.html index a5355f8b41..6e93cbd076 100644 --- a/starterOnly/index.html +++ b/starterOnly/index.html @@ -58,9 +58,8 @@

@@ -216,11 +215,12 @@

+
diff --git a/starterOnly/modal.js b/starterOnly/modal.js index b1a2d1de16..11884742cb 100644 --- a/starterOnly/modal.js +++ b/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,12 +40,17 @@ 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)); @@ -52,6 +58,8 @@ 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() { @@ -59,6 +67,7 @@ function launchModal() { } function fermerModal(){ + validation_ok.innerHTML=""; modalbg.style.display = "none"; } @@ -66,72 +75,95 @@ function fermerModal(){ 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"; + } - -} \ No newline at end of file + 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"; + + } +}