React-hook-form input fields match validation best practice

Question

What's the best practice when doing input fields match validation when dealing with React-hook-form? For example, when matching email inputs, etc.

While looking into email match validation with React-hook-form found an issue while trying to separate error messages from "coupled elements" through their validation method. The ref only takes one argument that is used for React-hook-form register, while needing to use useRef to access the current.value for value matching, as follows:

import React, { useRef } from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";

function App() {
  const { register, handleSubmit, errors } = useForm();
  const inputEmail = useRef(null)
  const onSubmit = data => {
    console.log('onSubmit: ', JSON.stringify(data))
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="email">Email</label>
      <input
        name="email"
        type="email"
        ref={inputEmail}
      />
      {/* desired: show `email` error message */}
      <label htmlFor="email">Email confirmation</label>
      <input
        name="emailConfirmation"
        type="email"
        ref={register({
          validate: {
            emailEqual: value => (value === inputEmail.current.value) || 'Email confirmation error!',
          }
        })}
      />
      {errors.emailConfirmation && <p>{errors.emailConfirmation.message}</p>}
      <input type="submit" />
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

While this pattern seems to be an option when doing input field matching it does not play well with React-hook-form!

For example, the error message is coupled with one input case only and has no separate messages for each independent field, or one of the input fields does not have the register assigned to it, this means that the property required is not set, etc.

So, I'm looking into a good practice or pattern that solves:

• Keeping error messages separated by the input field
• The validation method, when testing the match should be able to reference the twin field value in a React compliant way and not through the DOM (document.querySelector, etc)

Answer 1

You shouldn't need the manual ref for inputEmail. Instead, use the getValues method to fetch the current value of your whole form.

const { register, getValues } = useForm()

Then you register both inputs and call getValues from your custom validation.

  <input
    name="email"
    type="email"
    ref={register}
  />
  <input
    name="emailConfirmation"
    type="email"
    ref={register({
      validate: {
        emailEqual: value => (value === getValues().email) || 'Email confirmation error!',
      }
    })}
  />

Answer 2

For this you could use Yup library, which is great:

Add validationSchema to your config object when instantiating useForm and pass a valid Yup schema. Like so:

const Schema = yup.object().shape({
  email: yup.string().required('Required field'),
  emailConfirmation: yup
    .string()
    .oneOf([yup.ref('email')], 'Emails must match')
    .required('Required field'),
});

// How to add it to your useForm
const { register } = useForm({
  validationSchema: Schema
})

Your component should look something like this:

function App() {
  const { register, handleSubmit, errors } = useForm({
    validationSchema: Schema
  });

  const onSubmit = data => {
    console.log('onSubmit: ', JSON.stringify(data))
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="email">Email</label>
      <input
        name="email"
        type="email"
        ref={register}
      />
      {/* desired: show `email` error message */}
      <label htmlFor="email">Email confirmation</label>
      <input
        name="emailConfirmation"
        type="email"
        ref={register}
      />
      {errors.emailConfirmation && <p>{errors.emailConfirmation.message}</p>}
      <input type="submit" />
    </form>
  );
}