Problem with validation: if I click one input it will show error in the another input

Question

I really stuck up. I have a problem with my validation scheme. When I clicking on password field it shows an error also in the new password field. Validation scheme looks like right, but maybe I have missed something. So, this is my form:

And when I focusing field with current password error also is appearing inside the new password field. This is my code:

import React, { useState } from "react";
import { useFormik } from "formik";
import { useSelector } from "react-redux";

import { UserPasswordChangeSchema } from "common/types/user/userPasswordChangeSchema.type";
import { InputText, Button } from "../../components/common/index";
import { passChange } from "helpers/passChange";

import './SecurityPage.css'
import { Redirect } from "react-router-dom";

export const SecurityPage: React.FC = () => {
    const email = useSelector((state: any) => state.userprofile.profile ? state.userprofile.profile.email : null)
    const [makeRedirect, setMakeRedirect] = useState<boolean>(false);

    const formik = useFormik(
        {
            initialValues: {
                oldPassword: '',
                password: '',
                passwordConfirm: ''
            },
            onSubmit: async values => {
                if (
                    await passChange({
                        email,
                        oldPassword: values.oldPassword,
                        newPassword: values.passwordConfirm
                    })
                ) {
                    setMakeRedirect(true);
                }

            },
            validationSchema: UserPasswordChangeSchema
        }
    )

    

    if (makeRedirect) {
        return <Redirect to='/' />;
    }

    console.log(formik.touched)

    return (
        <div className="security">
            <div className="security-info">
                <h1 className="security-info-header">Security</h1>
                <h2 className="security-info-subheader">Here you can change your password.</h2>
            </div>
            <form action="" className="security-form" onSubmit={formik.handleSubmit}>
                <InputText
                    name={"Current password"}
                    propName={"oldPassword"}
                    value={formik.values.oldPassword}
                    isPassword={true}
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    touched={formik.touched.oldPassword}
                    errorMsg={formik.errors.oldPassword}
                    width={451}
                />
                <InputText
                    name={"New password"}
                    propName={"password"}
                    value={formik.values.password}
                    isPassword={true}
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    touched={formik.touched.password}
                    errorMsg={formik.errors.password}
                    width={451}
                />
                <InputText
                    name={"Confirm new password"}
                    propName={"passwordConfirm"}
                    value={formik.values.passwordConfirm}
                    isPassword={true}
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    touched={formik.touched.passwordConfirm}
                    errorMsg={formik.errors.passwordConfirm}
                    width={451}
                />
                <Button
                    isSubmit={true}
                    primary={true}
                    width={'451px'}
                    textCenter={true}>
                    Save
                </Button>
            </form>
        </div>
    )
}

And validation scheme:

import * as Yup from 'yup';

const UserPasswordChangeSchema = Yup.object({
    oldPassword: Yup.string()
        .trim()
        .required("Password is required"),
    password: Yup.string()
        .trim()
        .required("New password is required")
        .min(8, "The password must contain 8 - 24 characters")
        .max(24, "The password must contain 8 - 24 characters"),
    passwordConfirm: Yup.string()
        .trim()
        .oneOf([Yup.ref("password"), null], "Passwords must match")
});

export { UserPasswordChangeSchema }

I wiil be very appreciated for your help

Answer 1

Try to import the Field and ErrorMessage component from Formik

import { Field, ErrorMessage } from 'formik';

and replace the InputText for this new Field something like:

<Field
 placeHolder={"Current password"} 
 type="password" 
 name="oldPassword" 
 className="form-control"
 value={formik.values.oldPassword}
/>
<ErrorMessage name="oldPassword" />

and repeat for the others inputs but changes the data.