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);
};
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.