Implementing Form Validation in Lovable Projects

// No validation — form accepts any input
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const handleSubmit = () => {
  // Sends whatever the user typed, no checks
  saveUser({ name, email });
};

import { z } from "zod";
// Schema defines validation rules AND TypeScript types
const formSchema = z.object({
  name: z.string()
    .min(2, "Name must be at least 2 characters")
    .max(50, "Name must be under 50 characters"),
  email: z.string()
    .email("Please enter a valid email address"),
  password: z.string()
    .min(8, "Password must be at least 8 characters")
    .regex(/[A-Z]/, "Password must contain at least one uppercase letter")
    .regex(/[0-9]/, "Password must contain at least one number"),
});
// Extract the TypeScript type from the schema
type FormValues = z.infer<typeof formSchema>;

function SignupForm() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  return (
    <form onSubmit={() => saveUser({ name, email })}>
      <input value={name} onChange={e => setName(e.target.value)} />
      <input value={email} onChange={e => setEmail(e.target.value)} />
      <button type="submit">Sign Up</button>
    </form>
  );
}

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
function SignupForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<FormValues>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      name: "",
      email: "",
      password: "",
    },
  });
  const onSubmit = async (data: FormValues) => {
    // data is fully validated and typed at this point
    await saveUser(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name")} placeholder="Full name" />
      {errors.name && <p className="text-destructive text-sm">{errors.name.message}</p>}
      <input {...register("email")} placeholder="Email" />
      {errors.email && <p className="text-destructive text-sm">{errors.email.message}</p>}
      <input {...register("password")} type="password" placeholder="Password" />
      {errors.password && <p className="text-destructive text-sm">{errors.password.message}</p>}
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? "Signing up..." : "Sign Up"}
      </button>
    </form>
  );
}

<input {...register("email")} placeholder="Email" />
{errors.email && <p className="text-destructive text-sm">{errors.email.message}</p>}

import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
<FormField
  control={form.control}
  name="email"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Email</FormLabel>
      <FormControl>
        <Input placeholder="you@example.com" {...field} />
      </FormControl>
      <FormMessage /> {/* Automatically shows the Zod error message */}
    </FormItem>
  )}
/>

const schema = z.object({
  password: z.string().min(8),
  confirmPassword: z.string().min(8),
});

const schema = z.object({
  password: z.string().min(8, "Password must be at least 8 characters"),
  confirmPassword: z.string(),
}).refine((data) => data.password === data.confirmPassword, {
  message: "Passwords do not match",
  path: ["confirmPassword"], // Error appears on the confirmPassword field
});