Suppose you made a form using react-hook-form
import { useForm } from "react-hook-form";
export default function someComponent() {
const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = data => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<label htmlFor="name">Name</label>
<input id="name" {...register('name', { required: true, maxLength: 30 })} />
{errors.name && errors.name.type === "required" && <span>This is required</span>}
{errors.name && errors.name.type === "maxLength" && <span>Max length exceeded</span> }
<input type="submit" />
</form>
);
}
In this component, if we want to later add some custom validation to the name field outside of this component, maybe some wrapper that uses this component, is there any way to do so? like useFormContext or something? (NOTE - we cannot change this component)