From 1c6ea5ec30a3c5c36a8b51d8f66329b88f6dcf68 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 16 Mar 2026 11:02:08 +0100
Subject: [PATCH] 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>
---
 frontend/src/routes/documents/[id]/edit/+page.svelte | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/src/routes/documents/[id]/edit/+page.svelte b/frontend/src/routes/documents/[id]/edit/+page.svelte
index 18ae019e..86f48f42 100644
--- a/frontend/src/routes/documents/[id]/edit/+page.svelte
+++ b/frontend/src/routes/documents/[id]/edit/+page.svelte
@@ -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 -->