react-hook-form version 7 validation errors not working

Question

I'm having problems with validation errors using the new react-hook-form version 7 and was wondering if anyone can help (see example linked below).

https://codesandbox.io/s/react-hook-form-adapting-existing-form-forked-n3sis?file=/src/index.js

This all used to work until I updated from v6 to v7. I changed the way register was used, i.e. {...register('name', {required: 'Add this'})} instead of ref={register({required: 'Add this'})} and have updated getting the errors from formState now, i.e. const { formState: { errors }} = useForm(); instead of const { errors } = useForm();.

I'm pretty sure it's got something to do with me using a controlled component rather than just a native html <input /> but can't quite seem to figure it out.

Any help would be hugely appreciated. Thanks.

Joris · Accepted Answer · 2021-04-09 16:28:16Z

1

You just forgot to pass down props and ref to the input component.

const Input = React.forwardRef(
  ({ error, id, label, required, ...props }, ref) => {
    return (
      <>
        <label htmlFor={id}>{label}</label>
        <input id={id} required={required} {...props} ref={ref} />
        <span style={{ color: "red" }}>{error}</span>
      </>
    );
  }
);

Here is your codesandbox working: https://codesandbox.io/s/react-hook-form-adapting-existing-form-forked-dpxie?file=/src/index.js

answered Apr 9, 2021 at 16:28

Joris

2,83618 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user7409110 Over a year ago

Thanks for the answer, glad it was something simple. I really like the simplicity of react-hook-form and was hoping it wasn't that the version bump had changed something drastically and made life more complicated.

user7409110 Over a year ago

Which additional props does it actually require as in this example we're just spreading all props, where as in my team world example I'd rather be in a little more control as to what can be passed through, i.e. I wouldn't want className being passed and added and overriding existing defined styles.

George · Accepted Answer · 2024-03-12 18:10:14Z

1

I wasted around two days just to find out that I was the one who caused the problem.

I disabled submit button if the formState.isValid was false. But the default useForm validation mode is onSubmit. In this mode errors only show up when you submit the form and it was impossible because I disabled the button.

mode change to onBlur or onChange solved the problem

answered Mar 12, 2024 at 18:10

George

1,0903 gold badges12 silver badges26 bronze badges

Collectives™ on Stack Overflow

react-hook-form version 7 validation errors not working

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related