feat: add inline validation hint for German date input

Show a red border and format hint ("TT.MM.JJJJ") only when the user
has typed something but the date is not yet complete. Focuses-only
or empty fields show no error.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-16 11:02:08 +01:00
parent eae9fba170
commit 1c6ea5ec30

View File

@@ -27,6 +27,7 @@
let dateDisplay = isoToGerman(doc.documentDate ?? '');
let dateIso = doc.documentDate ?? '';
let dateDirty = false;
function handleDateInput(e: Event) {
const input = e.target as HTMLInputElement;
@@ -42,7 +43,10 @@
input.value = formatted;
dateDisplay = formatted;
dateIso = germanToIso(formatted);
dateDirty = true;
}
$: dateInvalid = dateDirty && dateDisplay.length > 0 && dateIso === '';
</script>
<div class="max-w-4xl mx-auto py-8 px-4">
@@ -83,9 +87,14 @@
on:input={handleDateInput}
placeholder="TT.MM.JJJJ"
maxlength="10"
class="block w-full rounded border-gray-300 shadow-sm p-2 border focus:border-brand-navy focus:ring-brand-navy text-sm"
class="block w-full rounded border-gray-300 shadow-sm p-2 border text-sm
{dateInvalid ? 'border-red-400 focus:border-red-500 focus:ring-red-500' : 'focus:border-brand-navy focus:ring-brand-navy'}"
aria-describedby={dateInvalid ? 'date-error' : undefined}
/>
<input type="hidden" name="documentDate" value={dateIso} />
{#if dateInvalid}
<p id="date-error" class="mt-1 text-xs text-red-600">Bitte im Format TT.MM.JJJJ eingeben, z.B. 20.12.2026</p>
{/if}
</div>
<!-- Ort -->