Merge pull request #1 from beseb/beseb/issue2

Issue #2 : form is working !

index.html

@@ -56,11 +56,14 @@ <h1 class="hero-headline">
         <div class="content">
           <span class="close"></span>
           <div class="modal-body">
+            <!--  As this is a student project, form's validation is disabled -->
             <form
+            id="form"
               name="reserve"
               action="index.html"
-              method="get"
-              onsubmit="return validate();"
+              autocomplete="on"
+              aria-autocomplete="both"
+              novalidate
             >
               <div
                 class="formData">
@@ -218,12 +221,19 @@ <h1 class="hero-headline">
           </div>
         </div>
       </div>
+          <div class="successModal">
+          <span class="close"></span>
+          <span class="successMessage">Merci pour votre inscription</span>
+          <button class="button close">Fermer</button>
+        </div>
     </main>
     <footer>
       <p class="copyrights">
         Copyright 2014 - 2022, GameOn Inc.
       </p>
     </footer>
-    <script src="./scripts/modal.js"></script>
+    <script src="./scripts/modal.js" type="module">
+    </script>
+    <script src="./scripts/app.js" type="module"></script>
   </body>
 </html>

scripts/app.js

@@ -0,0 +1,59 @@
+import { checkInputValue, checkIfLocationSelected, checkIfTermsAccepted, checkIfUserIsOver18, errorMessage, regexName, regexEmail, regexQuantity} from './function.js';
+import { closeModal } from './modal.js';
+
+// Get the form
+const form = document.getElementById('form');
+const successModal = document.querySelector('.successModal');
+const firstNameField = document.getElementById('first');
+const lastNameField = document.getElementById('last');
+const emailField = document.getElementById('email');
+const birthdateField = document.getElementById('birthdate');
+const quantityField = document.getElementById('quantity');
+const locations = document.querySelectorAll('input[name="location"]');
+const termsCheckbox = document.getElementById('checkbox1');
+
+// Check inputs with event listeners & functions
+firstNameField.addEventListener('input', function(){
+    checkInputValue(regexName, firstNameField, errorMessage.name);
+});
+lastNameField.addEventListener('input', function(){
+    checkInputValue(regexName, lastNameField, errorMessage.name);
+});
+emailField.addEventListener('input', function(){
+    checkInputValue(regexEmail, emailField, errorMessage.email);
+});
+quantityField.addEventListener('input', function(){
+    checkInputValue(regexQuantity, quantityField, errorMessage.quantity);
+});
+birthdateField.addEventListener('input', function(){
+    checkIfUserIsOver18(birthdateField, errorMessage.birthdate);
+});
+termsCheckbox.addEventListener('input', function(){
+    checkIfTermsAccepted(termsCheckbox, errorMessage.terms);
+});
+locations.forEach(location => location.addEventListener('input', function(){
+    checkIfLocationSelected(locations, errorMessage.locations);
+}));
+// Check if the form is valid & validate form
+function validate(e){
+    e.preventDefault();
+
+    // Check if the form is valid
+    const isFirstNameValid = checkInputValue(regexName, firstNameField, errorMessage.name);
+    const isLastNameValid = checkInputValue(regexName, lastNameField, errorMessage.name);
+    const isEmailValid = checkInputValue(regexEmail, emailField, errorMessage.email);
+    const isQuantityValid = checkInputValue(regexQuantity, quantityField, errorMessage.quantity);
+    const isBirthdateValid = checkIfUserIsOver18(birthdateField, errorMessage.birthdate);
+    const isLocationValid = checkIfLocationSelected(locations, errorMessage.locations);
+    const isTermsValid = checkIfTermsAccepted(termsCheckbox, errorMessage.terms);
+
+    // Validate form
+    if(isFirstNameValid && isLastNameValid && isEmailValid && isQuantityValid && isBirthdateValid && isLocationValid && isTermsValid){
+    successModal.style.display = "block";
+    form.reset();
+    closeModal();  
+    }
+
+}
+// Form submit
+form.addEventListener('submit',(e)=> validate(e)  ); 

scripts/function.js

@@ -0,0 +1,77 @@
+// Show and hide error message
+export const setErrorMessage=(element, message)=>{
+    element.parentElement.setAttribute('data-error', message);
+    element.parentElement.setAttribute('data-error-visible', true);
+}
+export const hideErrorMessage=(element)=>{
+    element.parentElement.removeAttribute('data-error');
+    element.parentElement.setAttribute('data-error-visible', false);
+}
+
+// Check if the input value is valid
+export function checkInputValue(regex, element, message){
+    if(!regex.test(element.value)){
+        setErrorMessage(element, message);
+        return false;
+    }
+    hideErrorMessage(element);
+    return true;
+}
+
+// Check if terms are accepted
+export function checkIfTermsAccepted(element, message){
+    if(!element.checked){
+        setErrorMessage(element, message);
+        return false;
+    }
+    hideErrorMessage(element);
+    return true;
+}
+
+// Check if a location is selected
+export function checkIfLocationSelected(locations, message){
+    const isChecked = Array.from(locations).some(location => location.checked);
+    if(!isChecked){
+        setErrorMessage(locations[0], message);
+        return false;
+    }
+    hideErrorMessage(locations[0]);
+    return true;
+}
+
+// Check if user is over 18
+
+export function checkIfUserIsOver18(element, message){
+  const birthdate = new Date(element.value);
+  let diff = Date.now() - birthdate.getTime();
+    diff = new Date(diff);
+
+    const userAge = Math.abs(diff.getUTCFullYear() - 1970);
+    console.log(userAge);
+    console.log(birthdate);
+    // Check if birthYear is realistic...
+    const currentYear = new Date().getFullYear();
+    const birthYear = birthdate.getFullYear();
+
+    if (birthYear < currentYear - 100 || birthYear.toString().length !== 4 || userAge < 18) {
+        setErrorMessage(element, message);
+        return false;
+    } 
+    hideErrorMessage(element);
+    return true;
+}
+
+// Message error
+export const errorMessage = {
+    name: 'Minimum 2 caractères, maximum 15 caractères. Les chiffres et caractères spéciaux différents de - ne sont pas autorisés',
+    email: 'Veuillez renseigner une adresse mail valide.',
+    birthdate: 'Vous devez avoir plus de 18 ans pour participer',
+    quantity: 'Veuillez renseigner un nombre entre 0 et 99',
+    locations: 'Veuillez sélectionner une ville',
+    terms: `Vous devez accepter les conditions d'utilisations !`,
+};
+
+// Regex variables
+export const regexName = /^([A-Za-z\s]{2,15})?([-]{0,1})?([A-Za-z\s]{2,15})$/;
+export const regexEmail = /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/;
+export const regexQuantity = /^[0-9]{1,2}$/;

scripts/modal.js

@@ -1,5 +1,5 @@
 function editNav() {
-  var x = document.getElementById("myTopnav");
+  let x = document.getElementById("myTopnav");
   if (x.className === "topnav") {
     x.className += " responsive";
   } else {
@@ -10,20 +10,20 @@ function editNav() {
 // DOM Elements
 const modalbg = document.querySelector(".bground");
 const modalBtn = document.querySelectorAll(".modal-btn");
-const formData = document.querySelectorAll(".formData");
 const closeBtn = document.querySelector(".close");
 const content = document.querySelector(".content");
 
 // launch modal event
 modalBtn.forEach((btn) => btn.addEventListener("click", launchModal));
 // close modal event
 closeBtn.addEventListener("click", closeModal);
-// launch modal form
-function launchModal() {
+
+// Launch modal form
+export function launchModal() {
   modalbg.style.display = "block";
 }
 // Close modal form
-function closeModal() {
+export function closeModal() {
   content.classList.toggle("--hidden");
   setTimeout(function() {
     modalbg.style.display = "none";

styles/modal.css

@@ -156,7 +156,22 @@ main {
 .smFont {
   font-size: 16px;
 }
-
+// Modal Success
+.successModal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+  background-color: rgba(26, 39, 156, 0.4);
+}
+.successMessage{
+  font-size: 1.5rem;
+  color: white;
+}
 .bground {
   display: none;
   position: fixed;