'How to apply mode onChange only to specific input element in useForm (react hook form)

I want to check user id in real time. So, I set useForm mode onChange. But It applys all input elements. I want to only specific input elements.

ex) userId, userPhoneNumber
How can I do it?

import { FieldErrors, useForm } from "react-hook-form";

interface UserFormType {
  name: string;
  id: string;
  phoneNumber: string;
}

export default function UserForm() {
  const { register, handleSubmit } = useForm<UserFormType>({
    mode: "onChange"
  });

  const onValid = (data: UserFormType) => {
    console.log("# onValid");
  };

  const onInValid = (errors: FieldErrors) => {
    console.log("# onInValid", errors);
  };

  return (
    <form onSubmit={handleSubmit(onValid, onInValid)}>
      <input
        {...register("id", {
          validate: {
            duplicateId: value => {
              // something works ...
              return true;
            }
          }
        })}
        type="text"
      />
      <input {...register("name")} type="text" />
      <input
        {...register("phoneNumber", {
          validate: {
            duplicatePhoneNumber: value => {
              // something works ...
              return true;
            }
          }
        })}
        type="text"
      />
      <input type="submit" value="Submit" />
    </form>
  );
}

The code above is an example. Above, I want to check only id and phoneNumber in real time.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source