[Feature]: Form example

[zernonia]

Describe the feature

Let's populate this page https://www.shadcn-vue.com/examples/forms.html with example 😁

reference: https://github.com/shadcn-ui/ui/tree/main/apps/www/app/examples/forms

Additional information

• [x] I intend to submit a PR for this feature.
• [ ] I have already implemented and/or tested this feature.

[sadeghbarati]

Vee-Validate or Formkit?

[zernonia]

Not sure. Both are great form framework, but 2 different approach 🙈

[ahmedmayara]

Hello! @zernonia I was wondering how should I approach this, I was thinking of using zod and native form tag to build this example, but now you mentioned Vee-Validate and FormKit. Should I wait until we implement the Form component like the one in shadcn-ui or just use zod and native form tag?

[zernonia]

I suggest let's go with Veelidate + Zod.

Reason:

1. It is super well-known and adopted.
2. Veelidate allows custom input easily (https://vee-validate.logaretm.com/v4/examples/custom-inputs/)
3. Veelidate works well with Zod (https://vee-validate.logaretm.com/v4/integrations/zod-schema-validation/)

Hope you agree with me @ahmedmayara 😁

[ahmedmayara]

Works for me! But first I'll try to build the Form component using VeeValidate and Zod, then I will use it to build the forms example.

[zernonia]

That'll be awesome! Looking forward to it!! 🚀

[otabekoff]

@zernonia @ahmedmayara How to use custom messages for validation? I did smth like this:

const postSchema = toTypedSchema(
  z.object({
    title: z.string().min(5, { message: "Iltimos 5tadan ko'p belgi kiriting." }),
    body: z.string().min(15, { message: "Iltimos hech bo'lmasa 15ta belgi kiriting." })
  })
)

But it is not working and even now showing "Required". How to handle this issue? Please add an example of handling this to the docs. Because, what everyone needs is that. No one uses default "Required" text if not in some rare cases. Because, everyone wants to show what's the exact error.

[sadeghbarati]

@otabekoff use discussion instead, this is an old issue

https://stackblitz.com/edit/rlaz3q?file=src%2FApp.vue

If you want custom required message you can do something like

const formSchema = toTypedSchema(
  z.object({
    username: z
      .string({
        required_error: 'Password is required', ///////
      })
      .min(5, { message: 'Please enter more than 5 characters.' }),
  })
);