I have profile settings form, where all fields are not required. Among this fields i have password and confirmNewPassword field I need to check that field confirmNewPassword matches password field and set this filed required(confirmNewPassword) only when i'm typing some text in the password field

This is my validation schema

  const validationSchema = Yup.object({
    firstName: Yup.string()
      .min(3, 'Firstname should be longer than 2 symbols')
      .max(255, 'Firstname should be shorter than 255 symbols')
      .nullable(true)
      .transform((_, value: string) => {
        return value === '' ? null : value
      }),
    lastName: Yup.string()
      .min(3, 'Lastname should be longer than 2 symbols')
      .max(255, 'Lastname should be shorter than 255 symbols')
      .nullable(true)
      .transform((_, value: string) => {
        return value === '' ? null : value
      }),
    email: Yup.string()
      .email('Invalid email format')
      .nullable(true)
      .transform((_, value: string) => {
        return value === '' ? null : value
      }),
    phone: Yup.string()
      .matches(/^[0-9] $/, 'Must be only digits')
      .min(4, 'Phone should be longer than 3 symbols')
      .max(12, 'Phone should be shorter than 12 symbols')
      .nullable(true)
      .transform((_, value: string) => {
        return value === '' ? null : value
      }),
    password: Yup.string()
      .min(4, 'Password should be longer than 3 symbols')
      .max(30, 'Password should be shorter than 30 symbols')
      .matches(/^[a-zA-Z0-9-] $/, 'Only English letters and numbers')
      .nullable(true)
      .transform((_, value: string) => {
        return value === '' ? null : value
      }),
    confirmNewPassword: Yup.string()
      .when('password', {
        is: (password: string) => password !== '',
        then: Yup.string()
          .oneOf([Yup.ref('password'), null], 'Passwords must match')
          .required('Field required, while changing password'),
      })
      .nullable()
      .transform((_, value: string) => {
        return value === '' ? null : value
      }),
  })

But i can't change any field now, while i don't type in the password and then in the confirmNewPassword fields.

UPD:

Check my answer below

CodePudding user response：

Remove the null value in the confirmPassword.

...
confirmNewPassword: Yup.string()
    .when('password', {
        is: (password: string) => password !== '',
        then: Yup.string()
            .required('Field required, while changing password'),
            .oneOf([Yup.ref('password')], 'Passwords must match')

...

This is because Password string can have string size [4, 30], this means confirmPassword cannot be null.

CodePudding user response：

This is working for me:

I've added .oneOf([Yup.ref('confirmNewPassword')], 'Passwords must match') in the password field and made it 'match each other', so now i can change any value in my form (because i've deleted the 'required' option in confirmNewPassword) and if i trying to type anything in the password or confirmNewPassword field, validation works fine.

This is my code:

 password: Yup.string()
      .min(4, 'Password should be longer than 3 symbols')
      .max(30, 'Password should be shorter than 30 symbols')
      .matches(/^[a-zA-Z0-9-] $/, 'Only English letters and numbers')
      .oneOf([Yup.ref('confirmNewPassword')], 'Passwords must match')
      .nullable(true)
      .transform((_, value: string) => {
        return value === '' ? null : value
      }),
    confirmNewPassword: Yup.string()
      .oneOf([Yup.ref('password')], 'Passwords must match')
      .nullable(true)
      .transform((_, value: string) => {
        return value === '' ? null : value
      })

Hope it will help someone