My learning diary

react-hook-form validations

Feeling a little abashed about leaving a bug unresolved for the day, but I want a break and keep the team posted. And I also want to share what I have learnt. However, if you know what’s the problem with my commit, please do not hesitate to reach out!

Back to the main learning point I am trying to share: In the pull request above, look at the first screenshot. The first screenshot was supposed to depict a form field that has gone through the validation function despite being untouched. Based on my understanding of the mockups I was given, this was the intended behaviour.

Though, this was not a default behaviour in react-hook-form. So I had to do the following:

import { SubmitHandler, useForm } from 'react-hook-form'
...
  const {
    reset,
    trigger,
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<TransferOwnershipInputs>({
    mode: 'onChange',
  })
  ...
  useEffect(() => {
    trigger()
  }, [])
...

I have not looked into whether the current approach is the ideal approach. If I come across anything better, I’ll write about it!

As for the actual validation functions, I got to know of a shorthand through Stack Overflow. As a result, registration looked like:

{...register('email', {
  required: REQUIRED_ERROR,
  validate: (value) => isEmail(value) || INVALID_EMAIL_ERROR,
})}

I suppose I could merge the check for required into validate, but it would not be as readable.

Relevant posts