How to validate password and confirm password in react-hook-form version 7

Question

I am using react-form-hook. I am trying to match the password and confirm the password. But it is not working and validation not get triggered.

This is the password input react-form-hook.

<div className="mb-4">
        <label className="input-label" htmlFor="password">
          Password
        </label>
        <input
          {...register("password", {
            required: true,
            minLength: {
              value: 8,
              message: "Password must have at least 8 characters",
            },
          })}
          className="input-field"
          id="password"
          type="password"
          placeholder="********"
        />
        {errors.password && (
          <p className="text-red-500">{errors.password.message}</p>
        )}
      </div>
      <div className="mb-4">
        <label className="input-label" htmlFor="confirmPassword">
          Confirm Password
        </label>
        <input
          {...register("password_repeat")}
          className="input-field"
          id="confirmPassword"
          type="password"
          placeholder="********"
        />
        {errors.password_repeat && (
          <p className="text-red-500">{errors.password_repeat.message}</p>
        )}
      </div>

handler

  const {
  register,
  watch,
  handleSubmit,
  formState: { errors, dirtyFields },
  } = useForm();
  const password = useRef({});

  password.current = watch("password", "");

submit form method.

const onSubmit = async (data, e) => {
e.preventDefault();
await createUserWithEmailAndPassword(data.email, data.password);
};

Answer 1

There are two methods [ getValues and watch ] provided by react-hook-form to get the current value of the form-fields. We can check the password and confirmpassword fields value from this methods and use it for to generate validation messages.

const { register, handleSubmit, getValues, watch, formState: { errors } } = useForm();

const onSubmit = (data) => {
  console.log(data);
};

<form onSubmit={handleSubmit(onSubmit)}>
  {/* register your input into the hook by invoking the "register" function. Here we can register the validations rules also */}
  <input
    {...register("password", {
      required: true,
      minLength: 5
    })}
    id="password"
    type="password"
    placeholder="********"
  />
  {errors?.password?.type === "required" && <p>This field is required</p>}
  {errors?.password?.type === "minLength" && (
    <p>password cannot less than 5 characters</p>
  )}
  {/* include validation with required or other standard HTML validation rules */}
  <input
    {...register("password_repeat", { required: true })}
    id="password"
    type="password"
    placeholder="********"
  />
  {/* errors will return when field validation fails  */}
  {/* here we watch the both password and confirm password filed and if both not match, trigger the validation */}
  {watch("password_repeat") !== watch("password") &&
  getValues("password_repeat") ? (
    <p>password not match</p>
  ) : null}

  <input type="submit" />
</form>

Check this demo password-match react-hook-form for full demonstration.