templates/default/formulaire.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Casting Kalina 2026 - Saison 4 - Formulaire {% endblock %}
  5. {% block body %}
  6. <div class="kalina-header">
  7.   <img src="{{ asset('img/logo-kalina.webp') }}" alt="Logo Kalina">
  8. </div>
  10. <div class="container mt-5">
  11.   <h2 class="text-center mb-4">đź“‹ Formulaire de Candidature Kalina</h2>
  13. <form method="POST" id="kalinaForm" action="{{ path('form.submit') }}" enctype="multipart/form-data">
  14.      {#  <div class="wizard-nav">
  15.       <button type="button" id="step1Btn">Étape 1</button>
  16.       <button type="button" id="step2Btn">Étape 2</button>
  17.       <button type="button" id="step3Btn">Étape 3</button>
  18.     </div>
  19.     <div class="progress mb-4">
  20.   <div id="progressBar" class="progress-bar bg-warning" role="progressbar" style="width: 33%;" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100"></div>
  21. </div> #} 
  23.       {% for message in app.flashes('email_error') %}
  24.       <div class="form-error" style="color: #e44118; font-size: 13px;">{{ message }}</div>
  25.     {% endfor %}
  26.   {{ include('default/step/step1.html.twig') }}
  27.   {{ include('default/step/step2.html.twig') }}
  28.   {{ include('default/step/step3.html.twig') }}
  29. </form>
  30. </div>
  31. <!-- Footer -->
  32. <footer>
  33.   Site crĂ©Ă© par <a href="https://basicom.fr" target="_blank">Basicom</a>
  34. </footer>
  36. <div id="formLoader" style="display: none; position: fixed; top:0; left:0; width:100%; height:100%; background-color: rgba(23, 33, 40, 0.9); z-index: 9999; justify-content: center; align-items: center;">
  37.   <div class="spinner-border text-light" style="width: 4rem; height: 4rem;" role="status">
  38.     <span class="visually-hidden">Chargement...</span>
  39.   </div>
  40.   <p class="text-white mt-3">Envoi en cours...</p>
  41. </div>
  43. {% endblock %}
  45. {% block javascripts %}
  46. <script>
  47. document.addEventListener("DOMContentLoaded", function () {
  48.   function showStep(step) {
  49.     document.querySelectorAll(".wizard-step").forEach(el => el.classList.remove("active"));
  50.     const currentStep = document.getElementById(`step${step}`);
  51.     if (currentStep) currentStep.classList.add("active");
  53.     const progress = document.getElementById("progressBar");
  54.     if (progress) {
  55.       progress.style.width = step === 1 ? "33%" : step === 2 ? "66%" : "100%";
  56.     }
  58.     document.getElementById("kalinaForm").scrollIntoView({ behavior: "smooth" });
  59.   }
  61.   function validateStep(step) {
  62.     let valid = true;
  63.     const currentStep = document.getElementById(`step${step}`);
  64.     if (!currentStep) return false;
  66.     const requiredFields = currentStep.querySelectorAll("input[required], select[required], textarea[required]");
  67.     requiredFields.forEach(field => {
  68.       const error = field.parentNode.querySelector(".form-error");
  69.       field.classList.remove("is-invalid");
  70.       if (error) error.remove();
  72.       if (!field.value.trim()) {
  73.         valid = false;
  74.         field.classList.add("is-invalid");
  76.         const errorMsg = document.createElement("div");
  77.         errorMsg.classList.add("form-error");
  78.         errorMsg.style.color = "#e44118";
  79.         errorMsg.style.fontSize = "13px";
  80.         errorMsg.textContent = "Champ non renseignĂ©";
  82.         field.parentNode.appendChild(errorMsg);
  83.       }
  84.     });
  86.     return valid;
  87.   }
  89.   function validateEmailsMatch(live = false) {
  90.     const email = document.querySelector("input[name='email']");
  91.     const confirmEmail = document.querySelector("input[name='confirm_email']");
  92.     if (!email || !confirmEmail) return true;
  94.     [email, confirmEmail].forEach(field => {
  95.       field.classList.remove("is-invalid", "is-valid");
  96.       const error = field.parentNode.querySelector(".form-feedback");
  97.       if (error) error.remove();
  98.     });
  100.     const feedback = document.createElement("div");
  101.     feedback.classList.add("form-feedback");
  102.     feedback.style.fontSize = "13px";
  104.     if (email.value.trim() !== confirmEmail.value.trim()) {
  105.       if (!live) {
  106.         confirmEmail.classList.add("is-invalid");
  107.         feedback.style.color = "#e44118";
  108.         feedback.textContent = "Adresse mail diffĂ©rente";
  109.         confirmEmail.parentNode.appendChild(feedback);
  110.         return false;
  111.       }
  112.     } else {
  113.       if (confirmEmail.value.trim() !== "") {
  114.         confirmEmail.classList.add("is-valid");
  115.         feedback.style.color = "green";
  116.         feedback.textContent = "✔️ Adresse confirmĂ©e";
  117.         confirmEmail.parentNode.appendChild(feedback);
  118.       }
  119.     }
  121.     return true;
  122.   }
  124.   function validateFile(input, maxMo, allowedExtensions = []) {
  125.     const file = input.files[0];
  126.     if (!file) return true;
  128.     const maxBytes = maxMo * 1024 * 1024;
  129.     const ext = file.name.split('.').pop().toLowerCase();
  130.     const existingError = input.parentNode.querySelector(".file-error");
  131.     if (existingError) existingError.remove();
  132.     input.classList.remove("is-invalid");
  134.     if (file.size > maxBytes) {
  135.       input.classList.add("is-invalid");
  136.       const error = document.createElement("div");
  137.       error.classList.add("file-error");
  138.       error.style.color = "#e44118";
  139.       error.style.fontSize = "13px";
  140.       error.textContent = `Fichier trop volumineux (max ${maxMo} Mo)`;
  141.       input.parentNode.appendChild(error);
  142.       return false;
  143.     }
  145.     if (allowedExtensions.length && !allowedExtensions.includes(ext)) {
  146.       input.classList.add("is-invalid");
  147.       const error = document.createElement("div");
  148.       error.classList.add("file-error");
  149.       error.style.color = "#e44118";
  150.       error.style.fontSize = "13px";
  151.       error.textContent = `Format non autorisĂ© (${allowedExtensions.join(', ')})`;
  152.       input.parentNode.appendChild(error);
  153.       return false;
  154.     }
  156.     return true;
  157.   }
  159.   // Navigation Ă‰tapes
  160.   document.querySelectorAll(".btn-next").forEach(btn => {
  161.     btn.addEventListener("click", function () {
  162.       const next = parseInt(this.dataset.next);
  163.       const current = next - 1;
  164.       if (validateStep(current)) showStep(next);
  165.     });
  166.   });
  168.   document.querySelectorAll(".btn-prev").forEach(btn => {
  169.     btn.addEventListener("click", function () {
  170.       const prev = parseInt(this.dataset.prev);
  171.       showStep(prev);
  172.     });
  173.   });
  175.   // Live email check
  176.   const confirmEmail = document.querySelector("input[name='confirm_email']");
  177.   if (confirmEmail) {
  178.     confirmEmail.addEventListener("input", () => validateEmailsMatch(true));
  179.   }
  181.   // Reset d'erreur sur fichier quand modifiĂ©
  182.   document.querySelectorAll('input[type="file"]').forEach(input => {
  183.     input.addEventListener("change", () => {
  184.       const isVideo = input.id.includes("video");
  185.       validateFile(input, isVideo ? 100 : 3, isVideo ? ["mp4", "mov", "avi", "mkv"] : ["jpg", "jpeg", "png"]);
  186.     });
  187.   });
  189.   // Soumission finale
  190.   const form = document.getElementById("kalinaForm");
  191.   if (form) {
  192.     form.addEventListener("submit", function (e) {
  193.       e.preventDefault();
  195.       if (!validateStep(3)) return;
  196.       if (!validateEmailsMatch()) return;
  198.       const isPhoto1OK = validateFile(document.querySelector("#photo1"), 8, ["jpg", "jpeg", "png"]);
  199.       const isPhoto2OK = validateFile(document.querySelector("#photo2"), 8, ["jpg", "jpeg", "png"]);
  200.       const isPhoto3OK = validateFile(document.querySelector("#photo3"), 8, ["jpg", "jpeg", "png"]);
  201.      // const isVideoOK  = validateFile(document.querySelector("#video_motivation"), 100, ["mp4", "mov", "avi", "mkv"]);
  203.       if (!isPhoto1OK || !isPhoto2OK || !isPhoto3OK /*|| !isVideoOK*/) return;
  205.       // Supprimer l'attribut "required" des champs non visibles pour Ă©viter les erreurs de focus
  206.       form.querySelectorAll("input[required], select[required], textarea[required]").forEach(field => {
  207.        if (!field.offsetParent) {
  208.       field.removeAttribute("required");
  209.       }
  210.       });
  212.       // Affiche le loader
  213.       document.getElementById("formLoader").style.display = "flex";
  215.       setTimeout(() => {
  216.         form.submit();
  217.       }, 500); // Un petit dĂ©lai pour UX, sinon instantanĂ©
  218.     });
  219.   }
  221.   showStep(1);
  222. });
  224. </script>
  225. {% endblock %}