question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unions with Zod (like allowing empty string) don't show custom error messages, always Invalid input

See original GitHub issue

Describe 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 generic Invalid input message.

This basically makes it impossible to use React Hook Forms + Zod + optional fields + custom messages.

To Reproduce Steps to reproduce the behavior:

  1. Go to the Sandbox
  2. Write abc in the field and submit
  3. See Invalid input error instead of the expected bad 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:closed
  • Created 2 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

3reactions
jorisrecommented, May 16, 2021

@verekia fixed in the 2.5.1, let me know if you’ve an issue

2reactions
verekiacommented, May 17, 2021

Looks solved to me! Thank you very much for the super fast fix.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found