Matching fields example (ie. Passwords)

[mwickett]

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.

[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 jquense/yup#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'),

[mwickett]

Thanks so much for this. I see how it's more complicated than I had originally thought, although this all makes sense. Appreciate you taking the time.

[vuhrmeister]

For me that is not working. Did anything regarding refs change?

@eonwhite I'm using your code, but I don't get the link. value is the actual value of the prop the test is running on. But this.resolve(ref) returns a StringSchema. So this comparison doesn't work.

I already searched for that issue but I didn't find any working solution to get the actual value of the ref.

*edit: I just saw this issue is posted for formik, so probably not the best place to answer if anything changed. But maybe someone has an idea though. (I came from jquense/yup#97)

[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')
})
``

[vuhrmeister]

@jquense In 0.23.0? Doesn't work for me with .oneOf([Yup.ref('password')]). Also ${values} in message string just outputs [object Object]. The complete message is

newPasswordRepeat must be one of the following values: [object Object]

[FahdW]

@jquense I found that the validation is incorrectly showing passwords that do in fact match as an error.
@vuhrmeister Make sure to write an error for it yup.string().oneOf([yup.ref('password'), null], "Passwords don't match") I also have an issue where it is not validating properly

[vuhrmeister]

@FahdW I have a custom error set. I just posted the minimal implementation.

[FahdW]

@vuhrmeister Yeah the oneOf is not working i had to add my own method to get it to work

[jquense]

looks like a bug, 'ill take a look

[lednhatkhanh]

@jquense Doesn't work for my either, please take a look

[rares-lupascu]

tried mixed().oneOf ... string().oneOf ... nothing seems to work to match 2 fields :(

[rares-lupascu]

works with yup@0.24.0