Our Goal or Funda is very simple. Follow 4 steps implement a super duper form with validation with less code
Step 0: Define a zod schema
export const createDepartmentsSchema = z.object({
name: z.string().min(2, {
message: ‘Please enter your full name’
}),
remarks: z.string().min(2, {
message: ‘Subject must be at least 2 characters’
}),
description: z.string().min(20, {
message: ‘Message must be at least 20 characters’
}),
});
schema is nothing……. if you work with mongoose you already know it otherwise just think it just like typescript. whatever condition you write here if its not match it will show you this message on the UI.
(for more about zod schema you can google it)
Now start the process 🙂
Step 1. Define your form.
resolver: zodResolver(createDepartmentsSchema),
defaultValues: {
name: ”,
remarks: ”,
description: ”
}
});
using zodResolver connect your schema with form…
when you update you can set your current value on default values…
Step 2. Define a submit handler.
console.log(values);
}
currently we do console.log here to see our form data.. later we will implement API here.
Step 3. Init your form
<form
onSubmit={form.handleSubmit(onSubmit)}
className=’space-y-6′>
</form>
</Form>
First Form came from ShadCN which expect default values thats why we copy our form data. (step 1)
form onSumit is the default behavior of a form. we are already familer with it.. our 90% job done here ✅
Step 4: Final Step (Now its time to import input)
If you need a input field you can use your reUsable formInput (or you can use shadcn input here)…
form={form}
name=’name’
placeholder=’Your Name’
className=’!pl-8 rounded-full’
/>
FormInput just expert (form) you can think it just a connection creator between input and forms 😁
If you need Textarea
remember only form and name is required in every field. other fields are optional…
Finally a button need for submitting this form.
If everything works… then without data submitting form show warring….
If everything ok then…..
After submit data show data on console.
Thanks for reading ❤❤❤