Skip to content

Commit

Permalink
Issue OpenClassrooms-Student-Center#5 : Message de validation
Browse files Browse the repository at this point in the history
  • Loading branch information
@Axel93183
Axel93183 committed Dec 18, 2023
1 parent 3aa612a commit d97cd32
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 96 deletions.
7 changes: 3 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,8 +76,7 @@ <h1 class="hero-headline">
</div>
<p class="text-label">A quel tournoi souhaitez-vous participer cette année ?</p>
<div class="formData">
<input class="checkbox-input location" type="radio" id="location1" name="location" value="New York"
checked />
<input class="checkbox-input location" type="radio" id="location1" name="location" value="New York" />
<label class="checkbox-label" for="location1">
<span class="checkbox-icon"></span>
New York</label>
Expand Down Expand Up @@ -105,7 +104,7 @@ <h1 class="hero-headline">
</div>

<div class="formData">
<input class="checkbox-input" type="checkbox" id="checkbox1" name="checkbox1" checked />
<input class="checkbox-input" type="checkbox" id="checkbox1" name="checkbox1" />
<label class="checkbox2-label" for="checkbox1">
<span class="checkbox-icon"></span>
J'ai lu et accepté les conditions d'utilisation.
Expand All @@ -129,7 +128,7 @@ <h1 class="hero-headline">
Copyright 2014 - 2022, GameOn Inc.
</p>
</footer>
<script src="modal.js"></script>
<script src="modal.js" defer></script>
</body>

</html>
162 changes: 70 additions & 92 deletions modal.js
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,22 @@
// function editNav() {
// var x = document.getElementById("myTopnav");
// if (x.className === "topnav") {
// x.className += " responsive";
// } else {
// x.className = "topnav";
// }
// }

const toggleNavButton = document.getElementById("toggleNavButton");

// Ajoute un écouteur d'événements pour le clic sur le bouton de bascule
// event listener for toggle button clicks
toggleNavButton.addEventListener("click", function () {
// Récupère l'élément de la barre de navigation par son ID
const navigation = document.getElementById("myTopnav");

// Vérifie si la classe actuelle est "main-navbar topnav"
if (navigation.className === "main-navbar") {
// Ajoute la classe "responsive" si elle n'est pas présente
navigation.className += " responsive";
} else {
// Sinon, replace la classe "main-navbar"
navigation.className = "main-navbar";
}
});



// DOM Elements
const modalbg = document.querySelector(".bground");
const modalBtn = document.querySelectorAll(".modal-btn");
const formData = document.querySelectorAll(".formData");
const btnCloseModal = document.querySelector(".close");

// launch modal event
modalBtn.forEach((btn) => btn.addEventListener("click", launchModal));
const form = document.forms.reserve;

// launch modal form
function launchModal() {
Expand All @@ -45,86 +28,81 @@ function closeModal() {
modalbg.style.display = "none";
}

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

// close modal event
btnCloseModal.addEventListener("click", closeModal);

// Attend que le DOM soit entièrement chargé avant d'exécuter le script
document.addEventListener("DOMContentLoaded", function () {
// Sélectionne le formulaire avec le nom "reserve"
const form = document.forms.reserve;

// Ajoute un écouteur d'événements "submit" au formulaire
form.addEventListener("submit", function (event) {
// Annule le comportement par défaut de soumission du formulaire
event.preventDefault();
function validateEmail(email) {
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return regex.test(email);
}

// Appelle la fonction de validation du formulaire
if (validateForm()) {
console.log("Formulaire valide. Données envoyées.");
const validationMessageElement = document.createElement("p");
validationMessageElement.textContent = "Félicitations, votre inscription a été validé avec succès !!!"
form.appendChild(validationMessageElement);
} else {
console.log("Le formulaire n'est pas valide. Veuillez corriger les erreurs.");
// Les données du formulaire ne sont pas effacées ici, ce qui permet à l'utilisateur de les corriger sans perdre les saisies.
// form validation
function validateForm() {
// retrieving form field values
const firstName = form.first.value.trim();
const lastName = form.last.value.trim();
const email = form.email.value.trim();
const birthdate = form.birthdate.value;
const currentDate = new Date();
const quantity = form.quantity.value.trim();
const location = form.querySelector('input[name="location"]:checked');
const checkTerms = form.checkbox1;

// checking validation conditions
const isFirstNameValid = firstName.length >= 2 && !firstName == "";
const isLastNameValid = lastName.length >= 2 && !lastName == "";
const isEmailValid = validateEmail(email);
const isBirthdateValid = !isNaN(Date.parse(birthdate)) && Date.parse(birthdate) <= currentDate.getTime();
const isQuantityValid = !isNaN(quantity) && quantity >= 0 && !quantity == "";
const isLocationValid = location !== null;
const isCheckTermsValid = checkTerms.checked;

// display error messages in the DOM
function displayError(input, message, isValid) {

const errorMessageElement = document.createElement("p");
errorMessageElement.className = "error-message";
errorMessageElement.textContent = message;

const existingMsgError = input.parentNode.querySelector(".error-message");
if (existingMsgError) {
existingMsgError.remove();
}
});

// Fonction de validation du formulaire
function validateForm() {
// Récupération des valeurs des champs du formulaire
const firstName = form.first.value.trim(); //trim() enlève les espaces inutiles des valeurs des champs du formulaire
const lastName = form.last.value.trim();
const email = form.email.value.trim();
const birthdate = form.birthdate.value;
const quantity = form.quantity.value.trim();
const location = form.querySelector('input[name="location"]:checked');
const checkbox1 = form.checkbox1;

// Vérification des conditions de validation
const isFirstNameValid = firstName.length >= 2 && !firstName == "";
const isLastNameValid = lastName.length >= 2 && !lastName == "";
const isEmailValid = validateEmail(email);
const isBirthdateValid = !isNaN(Date.parse(birthdate));
const isQuantityValid = !isNaN(quantity) && quantity >= 0 && !quantity == "";
const isLocationValid = location !== null;
const isCheckbox1Valid = checkbox1.checked;

// Fonction pour afficher les messages d'erreur dans le DOM
function displayError(input, message, isValid) {

const errorMessageElement = document.createElement("p");
errorMessageElement.className = "error-message";
errorMessageElement.textContent = message;

const existingMsgError = input.parentNode.querySelector(".error-message");

// Vérifie si un message d'erreur n'existe pas déjà
if (existingMsgError) {
// Supprime l'élément du message d'erreur existant
existingMsgError.remove();
}

if (!isValid) {
// Ajoute un message d'erreur sous l'élément d'entrée si condition invalide
input.parentNode.appendChild(errorMessageElement);
}

if (!isValid) {
// error message below the input element if invalid condition
input.parentNode.appendChild(errorMessageElement);
}
}

displayError(form.first, "Le champ Prénom doit avoir au moins 2 caractères.", isFirstNameValid);
displayError(form.last, "Le champ Nom doit avoir au moins 2 caractères.", isLastNameValid);
displayError(form.email, "Veuillez saisir une adresse e-mail valide.", isEmailValid);
displayError(form.birthdate, "Veuillez saisir votre date de naissance.", isBirthdateValid);
displayError(form.quantity, "Veuillez saisir un nombre valide de concours (99 max).", isQuantityValid);
displayError(form.querySelector(".location"), "Veuillez sélectionner une ville.", isLocationValid);
displayError(form.checkbox1, "Veuillez lire et accepter les conditions d'utilisation.", isCheckbox1Valid);
displayError(form.first, "Le champ Prénom doit avoir au moins 2 caractères.", isFirstNameValid);
displayError(form.last, "Le champ Nom doit avoir au moins 2 caractères.", isLastNameValid);
displayError(form.email, "Veuillez saisir une adresse e-mail valide.", isEmailValid);
displayError(form.birthdate, "Veuillez saisir votre date de naissance.", isBirthdateValid);
displayError(form.quantity, "Veuillez saisir un nombre valide de concours (99 max).", isQuantityValid);
displayError(form.querySelector(".location"), "Veuillez sélectionner une ville.", isLocationValid);
displayError(form.checkbox1, "Veuillez lire et accepter les conditions d'utilisation.", isCheckTermsValid);

// Retourne true si toutes les conditions sont remplies, sinon false
return isFirstNameValid && isLastNameValid && isEmailValid && isBirthdateValid && isQuantityValid && isLocationValid && isCheckbox1Valid;
}
return isFirstNameValid && isLastNameValid && isEmailValid && isBirthdateValid && isQuantityValid && isLocationValid && isCheckTermsValid;
}

// submit form event
form.addEventListener("submit", function (event) {
event.preventDefault();

function validateEmail(email) {
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return regex.test(email);
const existingValidationMessage = document.querySelector(".validation-message");

if (validateForm()) {
if (!existingValidationMessage) {
const validationMessageElement = document.createElement("p");
validationMessageElement.className = "validation-message";
validationMessageElement.textContent = "Félicitations, votre inscription a été validée avec succès !!!";
form.appendChild(validationMessageElement);
}
} else {
existingValidationMessage.remove();
}
});
});

0 comments on commit d97cd32

Please sign in to comment.