From f5265a589e3f12083acfbe27358f217cd4ee21cb Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Wed, 25 Feb 2026 17:53:15 +0800
Subject: [PATCH] Fix form validation: red outline only on submit, add required
 asterisks

- Remove instant invalid:ring/border from Input component (was showing
  red outline on empty required fields before any interaction)
- Add CSS rule: form[data-submitted] input:invalid shows red border
- Add global submit listener in main.tsx that sets data-submitted on forms
- Add required prop to Labels missing asterisks: PersonForm (First Name),
  LocationForm (Location Name), CalendarForm (Name), LockScreen
  (Username, Password, Confirm Password)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/auth/LockScreen.tsx        | 6 +++---
 frontend/src/components/calendar/CalendarForm.tsx  | 2 +-
 frontend/src/components/locations/LocationForm.tsx | 2 +-
 frontend/src/components/people/PersonForm.tsx      | 2 +-
 frontend/src/components/ui/input.tsx               | 2 +-
 frontend/src/index.css                             | 8 ++++++++
 frontend/src/main.tsx                              | 8 ++++++++
 7 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/auth/LockScreen.tsx b/frontend/src/components/auth/LockScreen.tsx
index 7320f3a..961574a 100644
--- a/frontend/src/components/auth/LockScreen.tsx
+++ b/frontend/src/components/auth/LockScreen.tsx
@@ -204,7 +204,7 @@ export default function LockScreen() {
 
               <form onSubmit={handleCredentialSubmit} className="space-y-4">
                 <div className="space-y-2">
-                  <Label htmlFor="username">Username</Label>
+                  <Label htmlFor="username" required>Username</Label>
                   <Input
                     id="username"
                     type="text"
@@ -218,7 +218,7 @@ export default function LockScreen() {
                 </div>
 
                 <div className="space-y-2">
-                  <Label htmlFor="password">Password</Label>
+                  <Label htmlFor="password" required>Password</Label>
                   <Input
                     id="password"
                     type="password"
@@ -232,7 +232,7 @@ export default function LockScreen() {
 
                 {isSetup && (
                   <div className="space-y-2">
-                    <Label htmlFor="confirm-password">Confirm Password</Label>
+                    <Label htmlFor="confirm-password" required>Confirm Password</Label>
                     <Input
                       id="confirm-password"
                       type="password"
diff --git a/frontend/src/components/calendar/CalendarForm.tsx b/frontend/src/components/calendar/CalendarForm.tsx
index c26a7dd..429a94a 100644
--- a/frontend/src/components/calendar/CalendarForm.tsx
+++ b/frontend/src/components/calendar/CalendarForm.tsx
@@ -89,7 +89,7 @@ export default function CalendarForm({ calendar, onClose }: CalendarFormProps) {
         </DialogHeader>
         <form onSubmit={handleSubmit} className="space-y-4">
           <div className="space-y-2">
-            <Label htmlFor="cal-name">Name</Label>
+            <Label htmlFor="cal-name" required>Name</Label>
             <Input
               id="cal-name"
               value={name}
diff --git a/frontend/src/components/locations/LocationForm.tsx b/frontend/src/components/locations/LocationForm.tsx
index 79dad1e..34f4073 100644
--- a/frontend/src/components/locations/LocationForm.tsx
+++ b/frontend/src/components/locations/LocationForm.tsx
@@ -110,7 +110,7 @@ export default function LocationForm({ location, categories, onClose }: Location
           <div className="px-6 py-5 space-y-4 flex-1">
             {/* Location Name */}
             <div className="space-y-2">
-              <Label htmlFor="loc-name">Location Name</Label>
+              <Label htmlFor="loc-name" required>Location Name</Label>
               <Input
                 id="loc-name"
                 value={formData.name}
diff --git a/frontend/src/components/people/PersonForm.tsx b/frontend/src/components/people/PersonForm.tsx
index df46b82..c08df8c 100644
--- a/frontend/src/components/people/PersonForm.tsx
+++ b/frontend/src/components/people/PersonForm.tsx
@@ -132,7 +132,7 @@ export default function PersonForm({ person, categories, onClose }: PersonFormPr
             {/* Row 2: First + Last name */}
             <div className="grid grid-cols-2 gap-4">
               <div className="space-y-2">
-                <Label htmlFor="first_name">First Name</Label>
+                <Label htmlFor="first_name" required>First Name</Label>
                 <Input
                   id="first_name"
                   value={formData.first_name}
diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx
index 86ff8bc..04db187 100644
--- a/frontend/src/components/ui/input.tsx
+++ b/frontend/src/components/ui/input.tsx
@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 invalid:ring-red-500 invalid:border-red-500',
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}
         ref={ref}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 508f5b1..1753ba3 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -193,6 +193,14 @@
   font-weight: 600;
 }
 
+/* ── Form validation — red outline only after submit attempt ── */
+form[data-submitted] input:invalid,
+form[data-submitted] select:invalid,
+form[data-submitted] textarea:invalid {
+  border-color: hsl(0 62.8% 50%);
+  box-shadow: 0 0 0 2px hsl(0 62.8% 50% / 0.25);
+}
+
 /* ── Ambient background animations ── */
 
 @keyframes drift-1 {
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 2e952d7..61ca364 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -6,6 +6,14 @@ import { Toaster } from 'sonner';
 import App from './App';
 import './index.css';
 
+// Mark forms as submitted so CSS validation outlines only appear after a submit attempt.
+// The attribute is cleared naturally when Sheet/Dialog forms unmount and remount.
+document.addEventListener('submit', (e) => {
+  if (e.target instanceof HTMLFormElement) {
+    e.target.setAttribute('data-submitted', '');
+  }
+}, true);
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {