Yup confirm password validation

Question

I am using Yup https://www.npmjs.com/package/yup and I read https://www.npmjs.com/package/yup-password to validate my formik forms.

I do not find a way to have two fields that should be equal to be valid:

• newPassword
• confirmNewPassword

Is there a way to test that both are equal?

Answer 1

You may combine yup.string().oneOf() and yup.ref() methods to achieve the same.

import * as yup from "yup";
import YupPassword from "yup-password";
YupPassword(yup);

const schema = yup.object().shape({
  password: yup.string().password().required(),
  confirmPassword: yup
    .string()
    .oneOf([yup.ref("password"), null], "Passwords must match"),
});

schema
  .validate({ password: "12345678aB1!", confirmPassword: "12345678aB1!" })
  .then(() => console.log("Valid"))
  .catch((err) => console.log(err.message));