Estoy usando reaccionar-forma-gancho. Estoy tratando de hacer coincidir la contraseña y confirmar la contraseña. Pero no funciona y la validación no se activa.
Esta es la entrada de contraseña 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>manipulador
const { register, watch, handleSubmit, formState: { errors, dirtyFields }, } = useForm(); const password = useRef({}); password.current = watch("password", "");método de envío de formulario.
const onSubmit = async (data, e) => { e.preventDefault(); await createUserWithEmailAndPassword(data.email, data.password); };Hay dos métodos [ getValues y watch ] proporcionados por react-hook-form para obtener el valor actual de los campos de formulario. Podemos verificar la contraseña y confirmar el valor de los campos de contraseña de estos métodos y usarlo para generar mensajes de validación.
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>Consulte este formulario de reacción de gancho de coincidencia de contraseña de demostración para obtener una demostración completa.