'How to use soft validation (aka tips or warning messages) in React Hook Form v7
What I'm trying to do:
I'm building a complex form and need a way to provide tips and warning messages based on certain conditions (mostly regex) without blocking form submission. Essentially the messages will act as a form of soft validation to help the user complete a higher quality form. I would like to find a solution that plays well with React Hook Form V7.
The Problem:
React Hook Form V7 only supports hard validation (aka blocks form submission). From what I can tell there's no plan to add support this feature in the near future according to this rhf feature request.
Possible Solutions:
There are some V6 solutions proposed in the above rhf feature request such as this one from the creator of rhf:
- Using a custom Power Controller (Sandbox), (https://www.youtube.com/watch?v=Vkiyg_KfNK4&t=14s)
const PowerController = (props: Props) => {
const { formState } = useFormContext();
const isDirty = !!formState.dirtyFields[props.name];
const isTouched = !!formState.touched[props.name];
return (
<Controller
control={props.control}
name={props.name}
defaultValue={props.defaultValue}
render={(innerProps) => {
return props.render({
...innerProps,
isDirty,
isTouched,
warning: props.warn(innerProps.value)
});
}}
/>
);
};
- However, I've been unable to get this to work with V7 Controller
I also found this answer on how to trigger custom onChange with rhf and the suggestion was to pass an onChange to Controller or to useWatch(). Link here.
I like passing the custom
onChangetoControllersolution but if I understand right doing so would replace theonChangethat's built intoController. I'm not sure how to make this work since I'm just trying to add some functionality (aka soft validation on field change).The solution of useWatch() to see when the value changes then have a separate
useEffect()that I place my soft validation logic in seems reasonable but in a complex form might get real messy??
What I need help with:
Any suggestions on which approach is best and/or ideas on how to adapt the Power Controller V6 solution to work with the V7 Controller would be appreciated. I'm just learning rhf and hoping to get some input before I spend weeks banging my head against a wall trying to solve this lol.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
