Need different validations for Save as draft and Submit button in form.

[amanchanna]

I have a form having Save as draft and Submit button. I am using schema based validations using Yup. The validations for Save as draft and Submit button are different.

Basically the user can save as draft even if the required fields are not filled but other validations like max length and amount format etc. should be checked while doing Save as draft.
All the validations including the required one should be applied when doing Submit.
For e.g - We have an amount field that is required and should not be of length more than 14. The validations should be as follows:
For Submit:

amount: yup.string().required().max(14)

For Save as Draft:

amount: yup.string().max(14)

Is there a way we can have different schema for different button click or any other better way to handle this condition in react hook form?

[bluebill1049]

why not just use getValues() to retrieve all the input values.

[bluebill1049]

so you still want to validate the form, use resolver and keep two validation schema then.

[amanchanna]

I could not find anywhere in documentation on how to apply multiple validation schema and how to switch between these schema for Submit and save as draft.
Can you please guide me through?

[bluebill1049]

https://react-hook-form.com/api#useForm

• resolver
• context

[amanchanna]

Do you have any example where context is used along with schema?

[bluebill1049]

i don't, have a play with this CSB tho: https://codesandbox.io/s/react-hook-form-customresoliver-v6-h4ti6?file=/src/index.jsx

[sunnyfeijen]

@amanchanna did you ever solve this?

[albinbrengesjo]

Did you find another solution for this? @sunnyfeijen

[sunnyfeijen]

@albinbrengesjo I did find a working solution, I've written a bit about in this dev.to post

I hope this helps you!

[albinbrengesjo]

Is this problem still unsolved? Im also facing this particular issue.

[sega057]

Hello!
This is how I implemented it with zod validation:

export const draftResolver = zodResolver<zod.ZodType<Partial<YourPayloadType>>>(
    zod.object({
        id: zod.string({
            required_error: 'id is required',
        }),
    }),
);

export const defaultResolver = zodResolver<zod.ZodType<YourPayloadType>>(
...

// Inside a component
const isDraft = React.useRef(false);

const methods = useForm({
    resolver: (...args) => {
        if (isDraft.current) {
            return draftResolver(...args);
        }
        return defaultResolver(...args);
    },
    defaultValues,
});

const onSubmit = (draft?: boolean) => {
    isDraft.current = Boolean(draft);

    methods.handleSubmit(async (data) => {
        // any logic you want to submit the form
    })();
};