empty string is not accepted in non-optional validation schema

[depsimon]

Describe the bug and the expected behavior

I want to accept empty strings in my form, but conform sends undefined values instead of empty strings.

Conform version

v1.1.0

Steps to Reproduce the Bug or Issue

Full reproduction: https://stackblitz.com/edit/remix-run-remix-zma3um?file=app%2Froutes%2F_index.tsx

I added the valibot and zod versions.

If you send an empty form, you'll get "The name should be a string" instead of "The name is required".
The description should be valid as an empty string.

I added the optional page that has the expected result but this allows for the field to not be passed, which is not what we want.

What browsers are you seeing the problem on?

Chrome, Firefox, Microsoft Edge, Safari, Others

Screenshots or Videos

No response

Additional context

I originally thought it was related to this issue.

[edmundhung]

Conform's zod integration did an additional step to strip empty string for you. You might find it different from the other solutions but this is a very important step to ensure zod pipeline system working as intended:

const schema = z.object({
   // Let's say you use `min(1)` to ensure the email to be required
   email: z.string().min(1, 'Required').email(), 
   // Does removing `.min(1)` makes it optional?
   // No. Zod will continue checking if the email is valid
   email: z.string().email(), 
});

However if the empty string is stripped, you can do this:

const schema = z.object({
   // Utlize Zod default require check as empty string will be stripped and become `undefined`
   email: z.string({ required_error: 'Required' }).email(), 
   // Zod will no longer check if the email is valid when email is `undefined`
   email: z.string().optional().email(), 
});

You can find some tips here on how to customize some of the behaviour. I am not sure about the case with the valibot integration but it is likely because of the same issue.

[panzerdp]

There seems to be some confusion with the way empty strings are handled.

For example, if I use z.string().optional().default(''), and the field value is an empty string, then after parsing it becomes undefined.

However, if I use z.string().optional().default('test'), and the field is an empty string, then the parse result becomes 'test'.

But how can I make an empty string pass the validation and the parsing result also to be an empty string? In my case I'd like the empty values in the form to simplify become empty strings in the parsing result.

Thank you.

[edmundhung]

I believe you are looking for .transform(), e.g. z.string().optional().transform(value => value ?? ''). This would make the result value an empty string if the field is empty with correct type from zod (It would become string instead of string | undefined)

[samselikoff]

Thanks for this, I also came here with the same question!

FWIW I was expecting z.string().or(z.literal("")) to have the same effect.