In React Hook Form, when a form has errors in it, it won’t emit the submit event normally.
However, sometimes it is important to manually handle form validity such as when using validation information from a server.
In that case, it is possible to manually handle the validation via the “mode” property of useForm options by setting it to “onChange”. An example below shows how to do this.
// tsx
import { DOMAttributes } from ‘react’;
import { DOMAttributes } from ‘react’;
import { FormProvider, useForm } from ‘react-hook-form’;
export const MyForm = () => {
const useFormMethods = useForm<any>({
mode: ‘onChange’,
});
const {
handleSubmit,
clearErrors,
} = useFormMethods;
const onValidSubmit = useCallback(async (data: any) => {
// Submit logic
}, []);
type OnFormSubmit = DOMAttributes<HTMLFormElement>[‘onSubmit’];
type OnFormSubmitEvent = Parameters<NonNullable<OnFormSubmit>>[0];
const onSubmit: OnFormSubmit = useCallback(
(ev: OnFormSubmitEvent) => {
// Manually validate values. If OK, proceed:
clearErrors();
handleSubmit(onValidSubmit)(ev);
},
[clearErrors, handleSubmit, onSubmit],
);
return (
<FormProvider {…useFormMethods}>
<>
<form onSubmit={onSubmit}>
</FormProvider>
);
}