Add bounty form validation errors

src/components/create-bounty-form.tsx

@@ -2,18 +2,22 @@
 
 import { useRef, useState } from "react";
 
-// BUG 2: Form validation - allows negative numbers and empty titles (see validation below)
-
 type CreateBountyFormProps = {
   onSubmit: (bounty: { title: string; reward: number; difficulty: string }) => void;
 };
 
+type FormErrors = {
+  title?: string;
+  reward?: string;
+};
+
 export function CreateBountyForm({ onSubmit }: CreateBountyFormProps) {
   const [title, setTitle] = useState("");
   const [reward, setReward] = useState("");
   const [difficulty, setDifficulty] = useState("Easy");
   const [submitting, setSubmitting] = useState(false);
   const [submissions, setSubmissions] = useState<string[]>([]);
+  const [errors, setErrors] = useState<FormErrors>({});
   const isSubmittingRef = useRef(false);
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -25,20 +29,23 @@ export function CreateBountyForm({ onSubmit }: CreateBountyFormProps) {
     setSubmitting(true);
 
     try {
-      // Validation: check for empty title and negative reward
+      const nextErrors: FormErrors = {};
       if (!title.trim()) {
-        alert("Title is required");
-        isSubmittingRef.current = false;
-        setSubmitting(false);
-        return;
+        nextErrors.title = "Title is required";
       }
+
       const rewardNum = Number(reward);
       if (isNaN(rewardNum) || rewardNum <= 0) {
-        alert("Reward must be a positive number");
+        nextErrors.reward = "Reward must be a positive number";
+      }
+
+      if (Object.keys(nextErrors).length > 0) {
+        setErrors(nextErrors);
         isSubmittingRef.current = false;
         setSubmitting(false);
         return;
       }
+      setErrors({});
 
       // Simulate API delay
       await new Promise((resolve) => setTimeout(resolve, 1000));
@@ -64,23 +71,27 @@ export function CreateBountyForm({ onSubmit }: CreateBountyFormProps) {
     <div className="card p-6 space-y-4">
       <h3 className="text-lg font-semibold">Create New Bounty</h3>
 
-      <form onSubmit={handleSubmit} className="space-y-4">
+      <form onSubmit={handleSubmit} className="space-y-4" noValidate>
         <div>
           <label className="block text-sm font-medium text-slate-600 mb-1">
             Title
           </label>
           <input
             type="text"
             value={title}
-            onChange={(e) => setTitle(e.target.value)}
+            onChange={(e) => {
+              setTitle(e.target.value);
+              setErrors((prev) => ({ ...prev, title: undefined }));
+            }}
             className="w-full rounded-lg border border-slate-200 px-3 py-2"
             placeholder="Bounty title"
-            required
-            minLength={1}
+            aria-invalid={Boolean(errors.title)}
+            aria-describedby={errors.title ? "title-error" : undefined}
           />
-          {/* FIX 2: Show validation error */}
           {errors.title && (
-            <p className="text-red-500 text-xs mt-1">{errors.title}</p>
+            <p id="title-error" className="text-red-500 text-xs mt-1">
+              {errors.title}
+            </p>
           )}
         </div>
 
@@ -91,14 +102,19 @@ export function CreateBountyForm({ onSubmit }: CreateBountyFormProps) {
           <input
             type="number"
             value={reward}
-            onChange={(e) => setReward(e.target.value)}
+            onChange={(e) => {
+              setReward(e.target.value);
+              setErrors((prev) => ({ ...prev, reward: undefined }));
+            }}
             className="w-full rounded-lg border border-slate-200 px-3 py-2"
             placeholder="100"
-            min="1"
+            aria-invalid={Boolean(errors.reward)}
+            aria-describedby={errors.reward ? "reward-error" : undefined}
           />
-          {/* FIX 2: Show validation error */}
           {errors.reward && (
-            <p className="text-red-500 text-xs mt-1">{errors.reward}</p>
+            <p id="reward-error" className="text-red-500 text-xs mt-1">
+              {errors.reward}
+            </p>
           )}
         </div>
 
@@ -141,4 +157,4 @@ export function CreateBountyForm({ onSubmit }: CreateBountyFormProps) {
       )}
     </div>
   );
-}
+}