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:
@@ -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 -->
|
||||
|
||||
Reference in New Issue
Block a user