ucef/as-talange
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ajouter un retour visuel sur la validation des champs obligatoires (mobile)
AS Talange CI/CD Pipeline / Build & Run Unit Tests (push) Successful in 3m15s
Details
AS Talange CI/CD Pipeline / Deploy to Test Environment (push) Successful in 3m14s
Details

Browse Source
This commit is contained in:
Youssef
2026-06-25 08:57:06 +02:00
parent bb48f919b0
commit 3477461fb2
1 changed files with 21 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
as-talange-web/src/main/resources/templates/public/formulaire.html
+21 -1
View File
@@ -6,7 +6,13 @@
<title>AS Talange - Formulaire d'inscription</title> <title>AS Talange - Formulaire d'inscription</title>
<script src="https://cdn.tailwindcss.com"></script> <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"> <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> </head>
<body class="bg-gray-50 flex items-center justify-center min-h-screen py-12"> <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"> <div class="max-w-xl w-full bg-white rounded-xl shadow-md p-8 border border-gray-100">
@@ -129,6 +135,20 @@
</div> </div>
<script> <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 typeDemandeRadios = document.querySelectorAll('input[name="typeDemande"]');
const nouvelleLicenceBlock = document.getElementById('nouvelleLicenceBlock'); const nouvelleLicenceBlock = document.getElementById('nouvelleLicenceBlock');