A good way to use forms in Remix is by using the remix-hook-form package, which utilizes the foundations of the react-hook-form package, considered the best for form handling.
Link to the documentation of the remix-hook-form package:
https://github.com/Code-Forge-Net/remix-hook-form
Since the form needs to be handled both on the server and client sides, the author Alem Tuzlak created this library.
I tested it and found it very good. Before testing it, I was planning to create my own package for form handling using any type of validator.
While I was looking for more information, I remembered the react-hook-form package and ended up stumbling upon the remix-hook-form package. My experience was the best.
First of all, you need to install the following packages:
pnpm add remix-hook-form react-hook-form @hookform/resolvers zod Below is a page that handles multiple forms and performs validation on both the client and server sides.
I used intent to differentiate the forms in a single route. I used the Form component and also utilized fetcher.
import type { ActionFunctionArgs, MetaFunction } from "@remix-run/node"; import { json } from "@remix-run/node" import { Form, useFetcher, useNavigation, isRouteErrorResponse, useRouteError } from "@remix-run/react" import { useRemixForm, getValidatedFormData, parseFormData } from "remix-hook-form" import { zodResolver } from "@hookform/resolvers/zod" import { z } from "zod" import { Label, Input, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@workspace/ui" import { Loader2Icon } from "lucide-react" export const meta: MetaFunction = () => [{ title: "Summary" }]; export default function Page() { const fetcher = useFetcher() const navigation = useNavigation() const loginForm = useRemixForm<LoginFormData>({ mode: "onSubmit", resolver: loginResolver, submitData: { intent: "login" }, fetcher }) const signUpForm = useRemixForm<SignUpFormData>({ mode: "onSubmit", resolver: signUpResolver, submitData: { intent: "sign-up" }, }) return ( <div className="w-full min-h-dvh flex items-center justify-center"> <div className="max-w-sm space-y-5"> <fetcher.Form onSubmit={loginForm.handleSubmit}> <Card className="w-full"> <CardHeader> <CardTitle className="text-2xl">Login</CardTitle> <CardDescription> Enter your email below to login to your account. </CardDescription> </CardHeader> <CardContent className="grid gap-4"> <div className="grid gap-2"> <Label htmlFor="email">Email</Label> <Input id="email" type="email" placeholder="m@example.com" {...loginForm.register("email")} /> {loginForm.formState.errors.email && ( <p className="text-xs text-red-500 font-medium">{loginForm.formState.errors.email.message}</p> )} </div> <div className="grid gap-2"> <Label htmlFor="password">Password</Label> <Input id="password" type="password" {...loginForm.register("password")}/> {loginForm.formState.errors.password && ( <p className="text-xs text-red-500 font-medium">{loginForm.formState.errors.password.message}</p> )} </div> </CardContent> <CardFooter> <Button type="submit" className="w-full"> {(fetcher.formData?.get("intent") === '"login"') ? <Loader2Icon className="w-4 h-4 animate-spin" /> : "Sign In" } </Button> </CardFooter> </Card> </fetcher.Form> <Form onSubmit={signUpForm.handleSubmit}> <Card className="w-full"> <CardHeader> <CardTitle className="text-2xl">SignUp</CardTitle> <CardDescription> Enter your email below to create your account. </CardDescription> </CardHeader> <CardContent className="grid gap-4"> <div className="grid gap-2"> <Label htmlFor="email">Email</Label> <Input id="email" type="email" placeholder="m@example.com" {...signUpForm.register("email")} /> {signUpForm.formState.errors.email && ( <p className="text-xs text-red-500 font-medium">{signUpForm.formState.errors.email.message}</p> )} </div> </CardContent> <CardFooter> <Button type="submit" className="w-full"> {(navigation.formData?.get("intent") === '"sign-up"') ? <Loader2Icon className="w-4 h-4 animate-spin" /> : "Sign up" } </Button> </CardFooter> </Card> </Form> </div> </div> ) } export const action = async ({ request }: ActionFunctionArgs) => { const formData = await parseFormData<{ intent?: string }>(request.clone()) if (!formData.intent) throw json({ error: "Intent not found" }, { status: 404 }) switch (formData.intent) { case 'sign-up': return await handleSignUp(request) case 'login': return await handleLogin(request) default: throw json({ error: "Invalid intent" }, { status: 404 }) } } const loginSchema = z.object({ email: z.string().email(), password: z.string().min(8) }) const loginResolver = zodResolver(loginSchema) type LoginFormData = z.infer<typeof loginSchema> async function handleLogin(request: Request) { const { errors, data, receivedValues: defaultValues } = await getValidatedFormData<LoginFormData>(request, loginResolver); if (errors) return json({ errors, defaultValues }) await new Promise(resolve => setTimeout(resolve, 1500)) return json(data) } const signUpSchema = z.object({ email: z.string().email() }) const signUpResolver = zodResolver(signUpSchema) type SignUpFormData = z.infer<typeof signUpSchema> async function handleSignUp(request: Request) { const { errors, data, receivedValues: defaultValues } = await getValidatedFormData<SignUpFormData>(request, signUpResolver); if (errors) return json({ errors, defaultValues }) await new Promise(resolve => setTimeout(resolve, 1500)) return json(data) } 
Top comments (0)