Check if string is URL without requiring it

[jinsley8]

I'm running into an issue using zod with react-hook-form where I set a field to optional and that it should be a URL if added but it is requiring it no matter what I do unless I remove it.

const schema = z.object({
  userWebsite: z.optional(z.string().trim().url({ message: 'Invalid URL' })),
  userInstagram: z.undefined().or(
    z
      .string()
      .trim()
      .regex(/^(?!http.*$).*/, {
        message: 'Only user username, not full domain',
      })
  ),
});

If I remove .URL() then it works and doesn't require the field to be filled.

[scotttrinh]

Instead of optional what you are probably after is a union with the empty string? z.union([z.literal(""), z.string().trim().url()])

[jinsley8]

This works, thanks!

[zrtsky]

Thanks a lot 🔥🔥🔥

[goranefbl]

This one is much simpler:
z.string().url().optional().or(z.literal(''))

[zackrw]

Do you need the .optional() still @goranefbl? I think that might be a no-op in this case.

Thanks for your solution! I'm using it.

[dylan-jaris]

Are you sure this is working as expected? With the solution you provided I tried the following inputs:

• "www" fails validation
• "www.test.com" passes validation
• "website" passes validation
• "w" passes validation

I'm currently trying this solution that seems to cover all of the test cases but also doesn't utilize the .url() method which is unfortunate.

z.string().optional().refine(value => !value || /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})(\/[\w.-]*)*\/?$/.test(value), {
    message: "Please provide a valid URL",
})