Optional email string schema fails on parsing empty string

[xsjcTony]

Well... I think it's working as expected that an empty string fails on z.string().email().optional() since the design principal of zod, where optional means undefined in TS rather than allowing an empty string at run time.

In yup, if you do something like yup.string().email() (It's optional by default, which is the run-time optional), it will success in parsing an empty string, but whatever... I'm sticking to zod

yup.string().email() // success with EMPTY STRING

One possible workaround I can think of and is working:
Note the optional() here is just to allow undefined, or in a form, more specifically just to add undefined to the type since I need to assign a default value to controlled input.

const emailSchema = z.string().max(0).or(z.string().email());

I mean.. although this works. but it's looking sooo weird... honestly. Is there any better alternative way to do so? Thanks.

https://stackblitz.com/edit/stackblitz-starters-zfd4c9?file=index.js

[ramil-thrive]

Any updates on this one?

[JacobWeisenburger]

Considering optional in TypeScript essentially just means undefined, it doesn't really make sence to me to allow an empty string. So I think zod is doing the right thing here. I do understand it makes using things like react-hook-form a little more difficult. Here's how I would solve your use case:

const emailSchema = z.union( [
    z.literal( '' ),
    z.string().email(),
] )
console.log( emailSchema.safeParse( '' ).success ) // true
console.log( emailSchema.safeParse( '[email protected]' ).success ) // true
console.log( emailSchema.safeParse( 'foo' ).success ) // false

I know it's not as short as it would be with yup, but I think it's better to be verbose than to have a shorter syntax and not be clear about what is happening.

If you found my answer satisfactory, please consider supporting me. Even a small amount is greatly appreciated. Thanks friend! 🙏
https://github.com/sponsors/JacobWeisenburger

[noynek]

Ran into the same issue with react hook form. Much appreciated.

[JacobWeisenburger]

Thanks for the sponsorship

[shabbir-hossain132112]

In my case email: z.union([z.literal(''), z.string().email()]) didn't work. It shows me the following issue -
Invalid literal value, expected ""

I had to use the following format instead -
email: z.string().optional().or(z.string().email())

[JacobWeisenburger]

z.union( [ z.literal( '' ), z.string().email() ] )

Not sure what to tell you, but this works as expected.

const emailSchema = z.union( [ z.literal( '' ), z.string().email() ] )
const parsed = emailSchema.safeParse( '' )
console.log( parsed ) // { success: true, data: '' }

---

z.string().optional().or( z.string().email() )

This schema will allow any string, so adding the .or( z.string().email() ) does not change the behavior.

const emailSchema = z.string().optional().or( z.string().email() )
const parsed = emailSchema.safeParse( 'not an email' )
console.log( parsed ) // { success: true, data: 'not an email' }