Matching fields example (ie. Passwords)

I’m struggling with getting a Yup validation working to ensure two fields match (in this case, password and password confirm).

    validationSchema: Yup.object().shape({
      password: Yup.string()
        .required('Password is required'),
      passwordConfirm: Yup.mixed().test('match', 'Passwords do not match', function (password) {
        return password === this.parent.passwordConfirm
      }).required('Password confirm is required')
    }),

I’m new to Formik & Yup (and relatively new to JS generally). Really appreciate any pointers.

[jquense]

FYI folks this has gotten easier in the most recent version of yup. oneOf and notOneOf` now support refs

validationSchema: Yup.object({
  password: Yup.string().required('Password is required'),
  passwordConfirm: Yup.string()
     .oneOf([Yup.ref('password'), null])
     .required('Password confirm is required')
})
``

[eonwhite]

Yup doesn’t make this common usecase as easy as it should. Here’s how I’ve gotten this to work (a slight modification of code in https://github.com/jquense/yup/issues/97)

function equalTo(ref: any, msg: any) {
  return Yup.mixed().test({
    name: 'equalTo',
    exclusive: false,
    message: msg || '${path} must be the same as ${reference}',
    params: {
      reference: ref.path,
    },
    test: function(value: any) {
      return value === this.resolve(ref);
    },
  });
}
Yup.addMethod(Yup.string, 'equalTo', equalTo);

…

then in your validationSchema:

    passwordConfirm: Yup.string().equalTo(Yup.ref('password'), 'Passwords must match').required('Required'),