Yup schema email reset password field validations with formik

Question

I am using formic for the forms , So Here is my HTML

<form onSubmit={handleSubmit} className={css.loginForm}>
            <Input
              variant='standard'
              textAlign='center'
              placeholder='Password'
              id='password'
              name='password'
              type='password'
              value={values.password}
              onChange={handleChange}
              onBlur={handleBlur}
              autoFocus
              error={errors.password && touched.password}
            />
            <Input
              variant='standard'
              textAlign='center'
              placeholder='Repeat Password'
              id='repeatPassword'
              name='repeatPassword'
              type='password'
              value={values.repeatPassword}
              onChange={handleChange}
              onBlur={handleBlur}
              autoFocus
              error={errors.repeatPassword && touched.repeatPassword}
            />
  {errors.repeatPassword ? (
         <div>{errors.repeatPassword}</div>
       ) : null}
         <Button
          variant='primary'
          theme='light'
          type='submit'
          disabled={!!errors.password || !!errors.repeatPassword}>
          <Typography variant='h1'>Reset Password</Typography>
        </Button>
    </form>

So Here now, I am using the validations like :

 validationSchema: Yup.object().shape({
    password: Yup.string().required('Password is required'),
    repeatPassword: Yup.string()
    .required('')
    .oneOf([Yup.ref('password'), null], 'Passwords must match')
  }),

Here , the conditions which gets failed are :

1. if the repeatpassword field is not filled then also the button gets enabled
2. I just wanted to show the message of the passwords must match including the conditions of both passwords needs to be matched and both fields are required .

Here,with these validation above things does not work

can any one help me with this ?

Answer 1

1. Because you validate repeatPassword with message is the empty string ''. So if this field not filled errors.repeatPassword is '' and disabled of button is false

2. Update your code like this:

   validationSchema: Yup.object().shape({
     password: Yup.string().required('Password is required'),
     repeatPassword: Yup.string()
       .required('Required')
       .oneOf([Yup.ref('password'), null], 'Passwords must match')
   }),
   

{errors.repeatPassword !== "Required" && <div>{errors.repeatPassword}</div>}