Unions with Zod (like allowing empty string) don't show custom error messages, always Invalid input
See original GitHub issueDescribe the bug
- React Hook Form sends empty fields as
''
empty strings. - Zod can only validate empty strings using unions (see this issue), such as using the
or
union shorthand:z.string().url().or(z.literal(""))
, which works correctly. - The problem arises when using custom error messages:
z.string().url('bad URL').or(z.literal(""))
always shows the genericInvalid input
message.
This basically makes it impossible to use React Hook Forms + Zod + optional fields + custom messages.
To Reproduce Steps to reproduce the behavior:
- Go to the Sandbox
- Write
abc
in the field and submit - See
Invalid input
error instead of the expectedbad URL
Codesandbox link https://codesandbox.io/s/lively-smoke-dm61w?file=/src/App.js
Expected behavior The Zod resolver should show the correct custom message.
Desktop (please complete the following information):
- OS: MacOS 11.2.3
- Browser Brave
- Version 1.23.73
Investigation
The structure of errors is deeper when a union is used. See the difference:
z.string().url('bad URL').parse('abc')
ZodError: [
{
"validation": "url",
"code": "invalid_string",
"message": "bad URL",
"path": []
}
]
vs union:
z.string().url('bad URL').or(z.literal('')).parse('abc')
ZodError: [
{
"code": "invalid_union",
"unionErrors": [
{
"issues": [
{
"validation": "url",
"code": "invalid_string",
"message": "bad URL",
"path": []
}
]
},
{
"issues": [
{
"code": "invalid_type",
"expected": "",
"received": "abc",
"path": [],
"message": "Expected , received abc"
}
]
}
],
"path": [],
"message": "Invalid input"
}
]
Issue Analytics
- State:
- Created 2 years ago
- Comments:6 (4 by maintainers)
Top Results From Across the Web
Table of contents - Zod | Documentation
You can customize some common error messages when creating a string schema. const name = z.string({ required_error: "Name is required", invalid_type_error: ...
Read more >zod - npm
nonempty(); Use the . nonempty method if you want the empty string ( "" ) to be considered invalid. Check out validator.
Read more >Validation plugin for Pothos GraphQL
A plugin for adding validation for field arguments based on zod. This plugin does not expose zod directly, but most of the options...
Read more >Error Handling in Zod - Deno
e.g. Invalid type. Expected string, received number. However depending on the error code, there may be additional properties as well. Here is a...
Read more >Usage With TypeScript - Redux Toolkit
As with the rest of the Redux Toolkit package, RTK Query is written in ... If query doesn't have a parameter, then void...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@verekia fixed in the 2.5.1, let me know if you’ve an issue
Looks solved to me! Thank you very much for the super fast fix.