Form validates required fields client-side with inline field-level errors

Submitters who discover missing or invalid fields only after hitting submit waste a full network round-trip, lose their place in the form, and frequently abandon. Directories that rely on server-only validation bleed 20-40% of completion rate on multi-field listings and push that friction onto the moderation queue as half-filled drafts. Inline field-level errors on blur catch mistakes at the point of input, keep scroll position intact, and give assistive technologies an accessible hook to announce problems, which matters directly to WCAG 2.2 SC 3.3.1 (Error Identification) and SC 3.3.3 (Error Suggestion) conformance.

Wire a schema-driven form in components/SubmissionForm.tsx so every required field validates on blur and renders its error inline next to the input, not in a toast. Use react-hook-form with zodResolver so the same schema can be shared with server handlers:

const schema = z.object({
  title: z.string().min(10, 'Title must be at least 10 characters'),
  description: z.string().min(50, 'Description must be at least 50 characters'),
  contactEmail: z.string().email('Invalid email address')
})

Render {errors.title && <span role="alert">{errors.title.message}</span>} under each input so screen readers announce the failure.