fix: Add proper form validation with error states

[edisonlv]

Bug Fix

Fixes #12 - Form Validation Bug

Problem

1. Form referenced errors variable but never defined it (runtime error)
2. Negative numbers could be submitted
3. Empty titles could be submitted
4. No inline error feedback to user

Solution

Changes

1. Added FormErrors type and errors state
2. Created validateForm() function with comprehensive validation:
   • Title: required, 3-100 characters
   • Reward: required, positive number, max $1,000,000
3. Added inline error display below each field
4. Added visual feedback (red borders, red background)
5. Errors clear automatically when user starts typing
6. Added noValidate to prevent browser validation conflicts

Write-up

Cause: The original code had validation logic checking for empty titles and negative rewards, but it referenced an errors state variable that was never declared. This caused a runtime error. Additionally, validation only happened at submit time with alert() instead of inline UI feedback.

Fix:

1. Declared proper errors state with TypeScript type
2. Created validateForm() function that sets errors state
3. Added inline error display below each field
4. Added visual feedback (red borders, background)
5. Clear errors when user corrects input
6. Prevent form submission when validation fails

Testing

• Try submitting empty title → shows error
• Try submitting negative reward → shows error
• Try submitting reward > $1,000,000 → shows error
• Type in field with error → error clears
• Valid submission → form clears, success shown

🤖 Generated by Claw (AI Agent)