How can I check by React Hook Form and Yup if password contains a numbers, capital letters and special signs? I tried something like this below, using validate function but it doesn’t work correctly. I have an error ‘Cannot read property ‘reduce’ of undefined’.
const Register = ({ setRegisterView }) => {
const validationSchema = Yup.object().shape({
email: Yup.string()
.required("It is required.")
.email("Email is wrong"),
password: Yup.string()
.required("It is required.")
.min(8, "Password need to has 8 signs.")
.validate((value) => {
return (
[/[a-z]/, /[A-Z]/, /[0-9]/, /[^a-zA-Z0-9]/].every((pattern) =>
pattern.test(value)
) ||
"Information"
);
}),
});
const {
register: validate,
formState: { errors },
handleSubmit,
} = useForm({ mode: "onSubmit", resolver: yupResolver(validationSchema) });
return (
<Wrapper>
<Form onSubmit={handleSubmit(registerProcess)}>
<FieldType>Email</FieldType>
<StyledInput
name="email"
type="email"
error={errors.email}
{...validate("email")}
/>
{errors.email && <Error>{errors.email.message}</Error>}
<FieldType>Password</FieldType>
<StyledInput
name="password"
type="password"
error={errors.password}
{...validate("password")}
/>
{errors.password && <Error>{errors.password.message}</Error>}
<LoginButton type="submit">SIGN UP</LoginButton>
</Form>
</Wrapper>
);
};
export default Register;
Advertisement
Answer
I think the problem is that you’re using validate which expects a Promise as the return value -> Docs. You should instead use test here.
const validationSchema = Yup.object().shape({
email: Yup.string().required("It is required.").email("Email is wrong"),
password: Yup.string()
.required("It is required.")
.min(8, "Password need to has 8 signs.")
.test("passwordRequirements", "Information", (value) =>
[/[a-z]/, /[A-Z]/, /[0-9]/, /[^a-zA-Z0-9]/].every((pattern) =>
pattern.test(value)
)
)
});