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

fix: forcer le retour visuel de validation sur mobile (novalidate)
AS Talange CI/CD Pipeline / Build & Run Unit Tests (push) Successful in 3m12s
Details
AS Talange CI/CD Pipeline / Deploy to Test Environment (push) Successful in 4m12s
Details

Browse Source
This commit is contained in:
Youssef
2026-06-25 10:07:51 +02:00
parent 44ae524626
commit fe3a1ec36c
1 changed files with 15 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
as-talange-web/src/main/resources/templates/public/formulaire.html
+15 -2
View File
@@ -8,10 +8,14 @@
<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> <style>
body { font-family: 'Inter', sans-serif; } body { font-family: 'Inter', sans-serif; }
.was-validated input:invalid { .was-validated input:invalid, .was-validated select:invalid {
border-color: #ef4444 !important; border-color: #ef4444 !important;
background-color: #fef2f2 !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> </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">
@@ -28,7 +32,7 @@
</ul> </ul>
</div> </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}" /> <input type="hidden" name="token" th:value="${tokenUuid}" />
<div class="space-y-3"> <div class="space-y-3">
@@ -142,6 +146,15 @@
form.addEventListener('submit', function(event) { form.addEventListener('submit', function(event) {
if (!form.checkValidity()) { if (!form.checkValidity()) {
event.preventDefault(); 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'); form.classList.add('was-validated');