Customizing form validation in React using Zod resolver for optional fields

Question

Customizing form validation in React using Zod resolver for optional fields

I am currently working on creating a form using React-hook-form and zod resolver. My goal is to have all fields be optional, yet still required despite being marked as optional in the zod schema:

const schema = z.object({
    name: z.string().min(3).max(50).optional(),
    description: z.string().min(3).max(255).optional(),
    image: clientImageSchema.optional(),
  })
const {...} = useForm({ resolver: zodResolver(schema) })

Upon submitting the form with blank inputs, it is validating the fields as required. I am trying to identify where the error or mistake may lie. Can you help me troubleshoot this issue?

typescript next.js react-hook-form zod

Answer 1

Answer №1

According to the information provided in the official documentation, it is necessary to create a union between your schema and z.literal("") in order to avoid triggering any errors when dealing with empty string values. Check out this example.

const optionalUrl = z.union([z.string().url().nullish(), z.literal("")]);

Answer 2

According to the information provided in the official documentation, it is necessary to create a union between your schema and z.literal("") in order to avoid triggering any errors when dealing with empty string values. Check out this example.

const optionalUrl = z.union([z.string().url().nullish(), z.literal("")]);

Answer 3

Answer №2

I encountered a similar issue and it seems to be related to handling empty strings. I came across a similar situation with enums, which you can read about here.

Currently, using the field with .preprocess() appears to resolve the issue. Here's an example:

const schema = z.object({
  // Pay attention, z.preprocess takes two arguments
  foo: z.preprocess(
    (foo) => {
      // this line won't work
      // return foo

      // this line will work, not sure why
      // console.log(typeof email)

      // I'm using this
      if (!foo || typeof foo !== 'string') return undefined
      return foo === '' ? undefined : foo
    },
    z
      .string()
      .email({
        message: 'Please correct your email address',
      })
      .optional(),
  ),
})

By implementing this, we create an optional field that is validated as an email field when it is not empty. There may be other solutions available, but this is what worked for me.

Answer 4

I encountered a similar issue and it seems to be related to handling empty strings. I came across a similar situation with enums, which you can read about here.

Currently, using the field with .preprocess() appears to resolve the issue. Here's an example:

const schema = z.object({
  // Pay attention, z.preprocess takes two arguments
  foo: z.preprocess(
    (foo) => {
      // this line won't work
      // return foo

      // this line will work, not sure why
      // console.log(typeof email)

      // I'm using this
      if (!foo || typeof foo !== 'string') return undefined
      return foo === '' ? undefined : foo
    },
    z
      .string()
      .email({
        message: 'Please correct your email address',
      })
      .optional(),
  ),
})

By implementing this, we create an optional field that is validated as an email field when it is not empty. There may be other solutions available, but this is what worked for me.

Answer 5

Answer №3

I have discovered a solution by providing the defaultValues when using the useForm function.

const defaultValues = {
  username: '',
  /** and so forth */
}

  useForm<UserCreateApiData>({
    resolver: yupResolver(schema),
    defaultValues,
  });

Answer 6

I have discovered a solution by providing the defaultValues when using the useForm function.

const defaultValues = {
  username: '',
  /** and so forth */
}

  useForm<UserCreateApiData>({
    resolver: yupResolver(schema),
    defaultValues,
  });

Answer 7

Answer №4

I stumbled upon this solution.

However, it doesn't clear the error message when the field is cleared after a failed submission.

It's also important to handle 'undefined' fields in the submit function to prevent including them in the fetch request.

const { handleSubmit, setValue, getValues, reset} = useForm<DataType>({
    resolver: zodResolver(DataSchema),
});

const preSubmit = () => {
    const values = getValues();
    if (values.name === "") setValue("name", undefined);
};

const submitForm = (data: DataType) => {
    console.log(data);
    reset();
};

<form onSubmit={(e) => {
    preSubmit();
    void handleSubmit(submitForm)(e);
}}>
    //...form fields
</form>

Answer 8

I stumbled upon this solution.

However, it doesn't clear the error message when the field is cleared after a failed submission.

It's also important to handle 'undefined' fields in the submit function to prevent including them in the fetch request.

const { handleSubmit, setValue, getValues, reset} = useForm<DataType>({
    resolver: zodResolver(DataSchema),
});

const preSubmit = () => {
    const values = getValues();
    if (values.name === "") setValue("name", undefined);
};

const submitForm = (data: DataType) => {
    console.log(data);
    reset();
};

<form onSubmit={(e) => {
    preSubmit();
    void handleSubmit(submitForm)(e);
}}>
    //...form fields
</form>

Answer 9

Answer №5

In order to make a field required in your useForm default value, insert an empty string even if it is marked as optional in the zod schema; otherwise, use undefined.

For example, consider an update user form where the password is marked as optional.

const form = useForm<z.infer<typeof updateUserSchema>>({
    resolver: zodResolver(updateUserSchema),
    reValidateMode : "onChange",
    defaultValues: {
        username: Data.User?.username ?? "", 
        email: Data.User?.email ?? "",
        password: undefined
    },
});

I opted for undefined instead of an empty string " " because it becomes required upon submission. Perhaps this is the behavior you desire? Simply use an empty string in the default value to enforce its requirement, even if it's technically optional.

Answer 10

In order to make a field required in your useForm default value, insert an empty string even if it is marked as optional in the zod schema; otherwise, use undefined.

For example, consider an update user form where the password is marked as optional.

const form = useForm<z.infer<typeof updateUserSchema>>({
    resolver: zodResolver(updateUserSchema),
    reValidateMode : "onChange",
    defaultValues: {
        username: Data.User?.username ?? "", 
        email: Data.User?.email ?? "",
        password: undefined
    },
});

I opted for undefined instead of an empty string " " because it becomes required upon submission. Perhaps this is the behavior you desire? Simply use an empty string in the default value to enforce its requirement, even if it's technically optional.

Customizing form validation in React using Zod resolver for optional fields

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Properties for a standard React component

Retrieve the Document ID from Firebase

Exploring the Worldwide Influence of TypeScript, React, and Material-UI

Guide to creating a production build for electron with react js and next framework

Custom React hook that returns an array of custom components

How to extract the complete URL from the API endpoint in nextjs

Experimenting with PIXI.js and Jest within a React Single Page Application

Ways to access a DOM element in Next.js when the class name is dynamically generated

Troubleshooting the Speed Problem Between NextJs and GTM

Angular: Issue encountered when accessing nested properties within an interface due to reading properties of undefined

Storing TypeScript functions as object properties within Angular 6

Enhancing Typescript Arrow Function Parameters using Decorators

Having trouble aligning image and expanding video to fit the screen in a NextJS application

Ways to incorporate JavaScript code within Reactjs

Struggling to understand how to define and utilize Static variables in TypeScript? If you're finding that they are consistently coming up

Should the index.js file in Next.js serve as the homepage or solely as the initial starting point?

Encountering a hydration error with the useResponsive hook in Nextjs Material UI

Bringing in TypeScript definitions for gridster

In the Sandbox, element.firstChild functions properly, but it does not work in the IDE

When a button is clicked in (Angular), it will trigger the highlighting of another button as a result of a value being modified in an array. Want to know the