From fe3a1ec36cd3c2574500994b65719e93b78ef35c Mon Sep 17 00:00:00 2001
From: Youssef <youssef.kaouachi@gmail.com>
Date: Thu, 25 Jun 2026 10:07:51 +0200
Subject: [PATCH] fix: forcer le retour visuel de validation sur mobile
 (novalidate)

---
 .../resources/templates/public/formulaire.html  | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)
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 cc5e7c2..e55b57e 100644
--- a/as-talange-web/src/main/resources/templates/public/formulaire.html
+++ b/as-talange-web/src/main/resources/templates/public/formulaire.html
@@ -8,10 +8,14 @@
     <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; } 
-        .was-validated input:invalid {
+        .was-validated input:invalid, .was-validated select:invalid {
             border-color: #ef4444 !important;
             background-color: #fef2f2 !important;
         }
+        .was-validated input[type="radio"]:invalid, .was-validated input[type="checkbox"]:invalid {
+            outline: 2px solid #ef4444;
+            outline-offset: 2px;
+        }
     </style>
 </head>
 <body class="bg-gray-50 flex items-center justify-center min-h-screen py-12">
@@ -28,7 +32,7 @@
             </ul>
         </div>
         
-        <form th:action="@{/inscription-public/formulaire}" th:object="${preInscription}" method="post" class="space-y-6">
+        <form th:action="@{/inscription-public/formulaire}" th:object="${preInscription}" method="post" class="space-y-6" novalidate>
             <input type="hidden" name="token" th:value="${tokenUuid}" />
 
             <div class="space-y-3">
@@ -142,6 +146,15 @@
         form.addEventListener('submit', function(event) {
             if (!form.checkValidity()) {
                 event.preventDefault();
+                
+                let errorMsg = document.getElementById('form-error-msg');
+                if (!errorMsg) {
+                    errorMsg = document.createElement('div');
+                    errorMsg.id = 'form-error-msg';
+                    errorMsg.className = 'mb-6 p-4 bg-red-50 border-l-4 border-red-500 text-red-700 text-sm rounded transition-all duration-300';
+                    errorMsg.innerHTML = '<h3 class="font-bold">Erreur de validation</h3><p>Veuillez renseigner tous les champs obligatoires (encadrés en rouge).</p>';
+                    form.insertBefore(errorMsg, form.firstChild);
+                }
             }
             form.classList.add('was-validated');
             
