Why isn't form working???

[rainnfx]

Hey, first off I'm a bit of an idiot. Sooo there may be a really simple explanation to this that I missed, never the less thanks in advance for however you help me if you do! :^)

Anyway, using NextJS V14 and everything I'm trying to make a Form inside of a Dialog. The issue is it doesn't submit at all when I click submit, but upon further testing, I've found that even an example provided by shadcn doesn't even work???

Anyway, here's my code:

"use client";

import React from "react";
import { z } from "zod";
import { CreateProjectSchema } from "@/schemas/index"; // Ensure this is correct
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";

import Link from "next/link";

import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogDescription,
  DialogFooter,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";

import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from "@/components/ui/select";

import { Textarea } from "@/components/ui/textarea";
import { useToast } from "@/components/ui/use-toast";

export default function CreateProject() {
  const { toast } = useToast();

  const form = useForm<z.infer<typeof CreateProjectSchema>>({
    resolver: zodResolver(CreateProjectSchema),
    defaultValues: {
      projectName: "",
      projectDomain: "other",
      projectOneLiner: "",
      projectDescription: "",
      projectLicense: "none",
      projectRepository: "",
      projectWebsite: "",
    },
  });

  function onSubmit(values: z.infer<typeof CreateProjectSchema>) {
    console.log("Form submitted with values:", values);
  }

  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="default">Create Project</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[600px]">
        <DialogHeader>
          <DialogTitle>Create New Project</DialogTitle>
          <DialogDescription>
            Fill out the details below to start your new open-source project.
          </DialogDescription>
        </DialogHeader>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
            <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 sm:gap-4">
              <FormField
                control={form.control}
                name="projectName"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Project Name</FormLabel>
                    <FormControl>
                      <Input placeholder="Enter project name" {...field} />
                    </FormControl>
                    <FormDescription>
                      This is your project's public name.
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="projectDomain"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Project Domain</FormLabel>
                    <FormControl>
                      <Select
                        onValueChange={field.onChange}
                        defaultValue={field.value}
                      >
                        <FormControl>
                          <SelectTrigger>
                            <SelectValue placeholder="Select a project domain" />
                          </SelectTrigger>
                        </FormControl>
                        <SelectContent>
                          <SelectItem value="ai/ml">AI / ML</SelectItem>
                          <SelectItem value="software">Software</SelectItem>
                          <SelectItem value="web">Web</SelectItem>
                          <SelectItem value="infrastructure">
                            Infrastructure
                          </SelectItem>
                          <SelectItem value="other">Other</SelectItem>
                        </SelectContent>
                      </Select>
                    </FormControl>
                    <FormDescription>
                      This is your project's domain / category.
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>
            <FormField
              control={form.control}
              name="projectOneLiner"
              render={({ field }) => (
                <div className="space-y-2">
                  <FormItem>
                    <Label htmlFor="oneliner">Project one-liner</Label>
                    <Textarea
                      placeholder="A place where people can build robots together."
                      {...field}
                    />
                    <FormDescription>
                      A project one-liner is a brief yet effective description
                      of your project.
                    </FormDescription>
                  </FormItem>
                </div>
              )}
            />
            <FormField
              control={form.control}
              name="projectDescription"
              render={({ field }) => (
                <div className="space-y-2">
                  <FormItem>
                    <Label htmlFor="description">Description</Label>
                    <Textarea
                      id="description"
                      placeholder="In this project, we aim to build a campus where people can collaborate on building robots together."
                      rows={3}
                      {...field}
                    />
                    <FormDescription>
                      This is your project's public description, feel free to be
                      as detailed as you want!
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                </div>
              )}
            />
            <div>
              <FormField
                control={form.control}
                name="projectLicense"
                render={({ field }) => (
                  <FormItem>
                    <Label htmlFor="language">Project License</Label>
                    <Select
                      onValueChange={field.onChange}
                      defaultValue={field.value}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Select a project license" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="mit">MIT License</SelectItem>
                        <SelectItem value="bsd3">
                          BSD 3-Clause "New" or "Revised" License
                        </SelectItem>
                        <SelectItem value="bsd2">
                          BSD 2-Clause "Simplified" License
                        </SelectItem>
                        <SelectItem value="isc">ISC License</SelectItem>
                        <SelectItem value="apache2">
                          Apache License 2.0
                        </SelectItem>
                        <SelectItem value="gnu3">
                          GNU General Public License v3
                        </SelectItem>
                        <SelectItem value="none">None</SelectItem>
                      </SelectContent>
                    </Select>
                    <FormDescription>
                      This is your project's license. Though at this time we
                      don't support many, here is more info on{" "}
                      <span className="underline">
                        <Link href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/licensing-a-repository#searching-github-by-license-type">
                          licenses
                        </Link>
                      </span>
                      .
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>
            <div className="grid grid-cols-2 gap-4">
              <FormField
                control={form.control}
                name="projectRepository"
                render={({ field }) => (
                  <FormItem>
                    <Label htmlFor="repo">Repository</Label>
                    <Input
                      id="repo"
                      placeholder="Enter repository URL"
                      {...field}
                    />
                    <FormDescription>
                      This is the link to your project's public repository.
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="projectWebsite"
                render={({ field }) => (
                  <FormItem>
                    <Label htmlFor="repo">Website</Label>
                    <Input
                      id="web"
                      placeholder="Enter project's website URL"
                      {...field}
                    />
                    <FormDescription>
                      This is the link to your project's public website.
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>
            <Button type="submit" className="space-y-reverse space-y-4">
              Create Project
            </Button>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  );
}

Also here's my schema (in another file, yes it is imported correctly):

export const CreateProjectSchema = z.object({
  projectName: z.string().nonempty("Project name is required"),
  projectDomain: z.enum([
    "ai/ml",
    "software",
    "web",
    "infrastructure",
    "other",
  ]),
  projectOneLiner: z
    .string()
    .min(2)
    .max(140)
    .nonempty("Project one-liner is required"),
  projectDescription: z.string().nonempty("Project description is required"),
  projectLicense: z.enum([
    "mit",
    "bsd3",
    "bsd2",
    "isc",
    "apache2",
    "gnu3",
    "none",
  ]),
  projectRepository: z.string().url().optional(),
  projectWebsite: z.string().url().optional(),
});

And again, I probably missed something major lol, but I've been at this for hours and I'd really appreciate some help. Thanks in advance! :D

ps: sorry for how much code is here.

[abhayclasher]

hey, ur form is likely failing validation silently. u're missing <FormControl> around ur Textareas, and for the Select components use value={field.value} instead of defaultValue. also slap a <FormMessage /> on every field so u can actually see if Zod is blocking the submit 👍