Skip to content

Commit

Permalink
fixes OpenClassrooms-Student-Center#2, Ajout de la validation de form…
Browse files Browse the repository at this point in the history 
…ulaire via Javascript
  • Loading branch information
ChrisP committed Apr 25, 2021
1 parent 3e47384 commit 88b8b3f
Show file tree
Hide file tree
Showing 2 changed files with 107 additions and 16 deletions.
25 changes: 13 additions & 12 deletions starterOnly/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,38 +62,39 @@ <h1 class="hero-headline">Marathon national<br>de jeux vidéos</h1>

<div class="modal-body">

<form name="reserve" action="index.html" method="get" onsubmit="return validate();">
<form name="reserve" action="index.html" method="POST">

<div class="formData">

<label>Prénom</label><br>
<input class="text-control" type="text" id="first" name="first" minlength="2"/><br>
<label for="first">Prénom</label><br>
<input class="text-control" type="text" id="first" name="first" /><br>

</div>

<div class="formData">

<label>Nom</label><br>
<label for="last">Nom</label><br>
<input class="text-control" type="text" id="last" name="last"/><br>

</div>

<div class="formData">

<label>E-mail</label><br>
<label for="email">E-mail</label><br>
<input class="text-control" type="email" id="email" name="email"/><br>

</div>

<div class="formData">

<label>Date de naissance</label><br>
<label for="birthdate">Date de naissance</label><br>
<input class="text-control" type="date" id="birthdate" name="birthdate"/><br>

</div>

<div class="formData">
<label>À combien de tournois GameOn avez-vous déjà participé ?</label><br>

<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">

</div>
Expand All @@ -107,8 +108,8 @@ <h1 class="hero-headline">Marathon national<br>de jeux vidéos</h1>
<span class="checkbox-icon"></span>New York</label>

<input class="checkbox-input" type="radio" id="location2" name="location" value="San Francisco"/>
<label class="checkbox-label" for="location2"><span class="checkbox-icon">
</span>San Francisco</label>
<label class="checkbox-label" for="location2">
<span class="checkbox-icon"></span>San Francisco</label>

<input class="checkbox-input" type="radio" id="location3" name="location" value="Seattle"/>
<label class="checkbox-label" for="location3">
Expand All @@ -129,13 +130,13 @@ <h1 class="hero-headline">Marathon national<br>de jeux vidéos</h1>
</div>

<div class="formData">
<input class="checkbox-input" type="checkbox" id="checkbox1" checked />
<input class="checkbox-input" type="checkbox" id="checkbox1" name="checkbox1" checked />
<label class="checkbox2-label" for="checkbox1">
<span class="checkbox-icon"></span>J'ai lu et accepté les conditions d'utilisation.</label><br>

<input class="checkbox-input" type="checkbox" id="checkbox2" />
<input class="checkbox-input" type="checkbox" id="checkbox2" name="checkbox2" />
<label class="checkbox2-label" for="checkbox2">
<span class="checkbox-icon"></span>Je Je souhaite être prévenu des prochains évènements.</label><br>
<span class="checkbox-icon"></span>Je souhaite être prévenu des prochains évènements.</label><br>

</div>

Expand Down
98 changes: 94 additions & 4 deletions starterOnly/modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,24 +13,114 @@ const modalBtn = document.querySelectorAll(".modal-btn");
const formData = document.querySelectorAll(".formData");

// Ciblage du span avec class close
const btnCloseModal = document.querySelector("span.close");
const btnCloseModal = document.querySelector("span.close");

// launch modal event
modalBtn.forEach((btn) => btn.addEventListener("click", launchModal));

// Fermeture de la modal
const closeModal= () => modalbg.style.display = "none";
// Fermeture de la modal
const closeModal = () => (modalbg.style.display = "none");

//Ajout d'un evenement clique sur le bouton pour appeler la fonction qui fermera la modal
btnCloseModal.addEventListener("click", closeModal);
btnCloseModal.addEventListener("click", closeModal);

// launch modal form
function launchModal() {
modalbg.style.display = "block";
}

//Ciblage des éléments du formulaire

const input = document.querySelectorAll("input");
const radio = document.querySelectorAll("input[type=radio]");
const checkbox = document.querySelector("input[type=checkbox]");

//Creation des regex pour valider les donnée qu'on souhaite

const regexName = new RegExp(/[a-z]{2,}/i);
const regexMail = new RegExp(/^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/i);
const regexCompetition = new RegExp(/^[0-9]{1,}/);

//Ciblage du formulaire

document.forms[0].addEventListener("submit", (e) => {
// Cration d'une variable qui servira a stocké les messages d'erreurs
e.preventDefault();
let erreur;

// si la valeur retourné est différent de la regex => informé l'utilisateur de l'erreur
if (input[0].value != input[0].value.match(regexName)) {
erreur = "Veuillez renseigner un prénom valide";

//Permet de tester la validation de l'entrée sur la console
console.log("Veuillez renseigner un prénom valide");

// si la valeur retourné est différent de la regex => informé l'utilisateur de l'erreur
} else if (input[1].value != input[1].value.match(regexName)) {
erreur = "Veuillez renseigner un nom valide";

//Permet de tester la validation de l'entrée sur la console
console.log("Veuillre renseigner un nom valide");

// si la valeur retourné est différent de la regex => informé l'utilisateur de l'erreur
} else if (input[2].value != input[2].value.match(regexMail)) {
erreur = "Veuillez renseigner un email valide";

//Permet de tester la validation de l'entrée sur la console
console.log("Veuillez renseigner une adresse mail valide");

// si la valeur retourné est différent de la regex => informé l'utilisateur de l'erreur
} else if (input[4].value != input[4].value.match(regexCompetition)) {
erreur =
"Veuillez renseigner 0 ou le nombre de comptétion que vous avez fait";

//Permet de tester la validation de l'entrée sur la console
console.log("Veuillez renseigner un nombre de competition valide");

// si aucune ville selectionné => informé l'utilisateur de l'erreur
} else if (
!radio[0].checked &&
!radio[1].checked &&
!radio[2].checked &&
!radio[3].checked &&
!radio[4].checked &&
!radio[5].checked
) {
erreur = "Veuillez selectionné une ville";

//Permet de tester la validation de l'entrée sur la console
console.log("Veuillez indiqué une ville");

// si les CDG n'ont acceptés => informé l'utilisateur de l'erreur
} else if (!checkbox.checked) {
erreur = "Veuillez acceptez les conditions générales de vente";

//Permet de tester la validation de l'entrée sur la console
console.log("Il est obligé d'accepté les conditions de vente générales");
}

// Si toutes les entrées sont valide , envoi le formulaire

if (
input[0].value &&
input[1].value &&
input[2].value &&
input[3].value &&
input[4].value &&
radio[0].checked ||
radio[1].checked ||
radio[2].checked ||
radio[3].checked ||
radio[4].checked ||
radio[5].checked &&
checkbox.checked
) {
alert("FORMULAIRE ENVOYE AVEC SUCCES");

// sinon n'envoi pas le formulaire via la demande de comportement par défault
} else {
e.preventDefault();
formData.innerHTML = erreur;
return 0;
}
});

0 comments on commit 88b8b3f

Please sign in to comment.