How can I choose a validation based on a button click?

[leanjunio]

I have a form that is used for two different purposes: save draft and save as required.

On save draft, all fields should be optional, on save as required, all fields should be required.

How can I enforce these under one form and apply a validation schema (I'm using zod) when either of the two submits have been clicked?

[bluebill1049]

save draft should just use getValues() and skip all the validation

[leanjunio]

Oh, so on save draft, don't bother hitting the handleSubmit? Just get the values using getValues?

[bluebill1049]

yes, that's what I do with my own app beekai

[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
    })();
};

[Moshyfawn]

Lemme look into your implementation when I get to my computer; it might be worth adding to the docs

[sega057]

In my solution, formState.isSubmitting and other submit-related props will reflect the real state, when using getValues() and custom validation with setError() won't change it properly.

[dcmwong]

Thanks for the implementation. Can you point me to the docs within react hook form that describes how to conditionaly apply validation please.

[sega057]

@dcmwong that's the point, there are no instructions on how to do it in the docs. I came up with the solution on my own.
resolver function is called each time you submit the form, that's why it's possible to control the validation strategy using the value from useRef and changing it right before the submission.

[dcmwong]

Thanks for replying. I tried your solution and it didn't work for me. Checking form.formState.isValid doesn't change in time when I click on Draft and Submit. I'm reverting to validating in the server action and then trigger the form if the response is not right. I believe React Hook Form need to offer a setSchema so internally the schema can change prior to a submission trigger but I've seen that request made almost 2 years ago.