feat: ajouter un retour visuel sur la validation des champs obligatoires (mobile)

2026-06-25 08:57:06 +02:00
parent bb48f919b0
commit 3477461fb2
1 changed files with 21 additions and 1 deletions
@@ -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');