From 3477461fb27ecb75f0330674d810b656c7821135 Mon Sep 17 00:00:00 2001
From: Youssef <youssef.kaouachi@gmail.com>
Date: Thu, 25 Jun 2026 08:57:06 +0200
Subject: [PATCH] feat: ajouter un retour visuel sur la validation des champs
 obligatoires (mobile)

---
 .../templates/public/formulaire.html          | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)
diff --git a/as-talange-web/src/main/resources/templates/public/formulaire.html b/as-talange-web/src/main/resources/templates/public/formulaire.html
index 6e95c35..4c6f823 100644
--- a/as-talange-web/src/main/resources/templates/public/formulaire.html
+++ b/as-talange-web/src/main/resources/templates/public/formulaire.html
@@ -6,7 +6,13 @@
     <title>AS Talange - Formulaire d'inscription</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-    <style> body { font-family: 'Inter', sans-serif; } </style>
+    <style> 
+        body { font-family: 'Inter', sans-serif; } 
+        .was-validated input:invalid {
+            border-color: #ef4444 !important;
+            background-color: #fef2f2 !important;
+        }
+    </style>
 </head>
 <body class="bg-gray-50 flex items-center justify-center min-h-screen py-12">
     <div class="max-w-xl w-full bg-white rounded-xl shadow-md p-8 border border-gray-100">
@@ -129,6 +135,20 @@
     </div>
 
     <script>
+        const form = document.querySelector('form');
+        form.addEventListener('submit', function(event) {
+            if (!form.checkValidity()) {
+                event.preventDefault();
+            }
+            form.classList.add('was-validated');
+            
+            // Scroll to the first invalid element for better mobile UX
+            const firstInvalid = form.querySelector(':invalid');
+            if (firstInvalid) {
+                firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+
         const typeDemandeRadios = document.querySelectorAll('input[name="typeDemande"]');
         const nouvelleLicenceBlock = document.getElementById('nouvelleLicenceBlock');
 
