'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 |
|---|
