验证问题：如果我单击一个输入，它将在另一个输入中显示错误

Question

我真的很坚持。我的验证方案有问题。当我点击密码字段时，它也会在新密码字段中显示错误。验证方案看起来是正确的，但也许我遗漏了什么。所以，这是我的表格：

并且当我聚焦当前密码错误的字段时，新密码字段中也出现了。这是我的代码：


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>
    )
}

和验证方案：

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 }

非常感谢你的帮助

Answer 1

尝试从 Formik 导入 Field 和 ErrorMessage 组件

import { Field, ErrorMessage } from 'formik';

并将此新字段的 InputText 替换为：

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

并重复其他输入但更改数据。

验证问题：如果我单击一个输入，它将在另一个输入中显示错误

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

reactjs

yup

formik