如何使用formik实现第一次提交时的验证，第二次提交后的更改验证

Question

因此，在尝试使用formik处理输入字段时，我遇到了一些问题，基本上，在按下一个输入字段后，其他字段的验证就开始了，我不希望发生这种情况。

第一次验证最好只在提交时进行，然后在更改后继续验证。

这是我的代码：

逻辑：

const CompanyProfile = () => {
const CompanySchema = Yup.object().shape({
name: Yup.string()
.min(2, 'too short')
.required(ERROR_REQUIRED),
industry: Yup.string().notRequired(),
address: Yup.string().notRequired(),
crn: Yup.number().required(ERROR_REQUIRED),
website: Yup.string().notRequired(),
employeesNbr: Yup.string().required(ERROR_REQUIRED),
phoneNumber: Yup.number().required(ERROR_REQUIRED),
userRole: Yup.string().required(ERROR_REQUIRED),
personCheck: Yup.boolean().required(ERROR_REQUIRED),
});
const formik = useFormik({
initialTouched: false,
validateOnChange: true,
initialValues: {
name: '',
industry: '',
address: '',
crn: '',
website: '',
employeesNbr: '',
phoneNumber: '',
userRole: '',
personCheck: false,
},
validationSchema: CompanySchema,
onSubmit: values => {
alert(JSON.stringify(values, null, 2));
},
});
return (
<Skeleton pageTitle={PAGE_TITLE_COMPANY_PROFILE}>
<CompanyProfileForm formik={formik} />
</Skeleton>
);
};
export default CompanyProfile;

前端

const CompanyProfileForm = ({ formik }: Props) => {
const [modal, setModal] = useState(false);
const { errors } = formik;
const handleSubmit = () => {
console.log(formik);
formik.handleSubmit();
if (
!formik.errors.name &&
!formik.errors.crn &&
!formik.errors.employeesNbr &&
!formik.errors.phoneNumber &&
!formik.errors.userRole
) {
setModal(true);
} else setModal(false);
};
const handleModalClick = () => {
setModal(false);
};
return (
<div style={screenContainer}>
{formik.errors.personCheck && modal && (
<ModalPopup
warningMessage={WARNING_CONFIRM_PERSON}
onClick={handleModalClick}
success={false}
/>
)}
<div style={inputDiv}>
<div style={inputContainerLabel}>
<Nunito16 style={labelStyle}>{COMPANY_DETAILS}</Nunito16>
</div>
<div style={inputFieldContainer}>
<div style={firstInputColumn}>
<div style={inputContainer}>
<Nunito20 style={inputLabel}>{COMPANY_FORM_INPUT_NAME}</Nunito20>
<InputValidation
type="text"
name="name"
value={formik.name}
handleInputChange={formik.handleChange}
hasError={formik.errors.name}
validationMessage={formik.errors.name}
/>
</div>
<div style={inputContainer}>
<Nunito20 style={inputLabel}>
{COMPANY_FORM_INPUT_INDUSTRY}
</Nunito20>
<InputValidation
type="text"
name="industry"
value={formik.industry}
handleInputChange={formik.handleChange}
hasError={formik.errors.industry}
validationMessage={ERROR_REQUIRED}
/>
</div>
<div style={inputContainer}>
<Nunito20 style={inputLabel}>
{COMPANY_FORM_INPUT_ADDRESS}
</Nunito20>
<InputValidation
type="text"
name="address"
value={formik.address}
handleInputChange={formik.handleChange}
hasError={formik.errors.address}
validationMessage={formik.errors.address}
/>
</div>
<div style={inputContainer}>
<Nunito20 style={inputLabel}>
{COMPANY_FORM_INPUT_CR_NUMBER}
</Nunito20>
<InputValidation
type="number"
name="crn"
value={formik.crn}
handleInputChange={formik.handleChange}
hasError={formik.errors.crn}
validationMessage={formik.errors.crn}
/>
</div>
</div>
<div style={secondInputColumn}>
<div style={inputContainer}>
<Nunito20 style={inputLabel}>
{COMPANY_FORM_INPUT_WEBSITE}
</Nunito20>
<InputValidation
type="url"
name="website"
value={formik.website}
handleInputChange={formik.handleChange}
hasError={formik.errors.website}
validationMessage={formik.errors.website}
/>
</div>
<div style={inputContainer}>
<Nunito20 style={inputLabel}>
{COMPANY_FORM_INPUT_EMPLOYEES_NBR}
</Nunito20>
<InputValidation
type="number"
name="employeesNbr"
value={formik.employeesNbr}
handleInputChange={formik.handleChange}
hasError={formik.errors.employeesNbr}
validationMessage={ERROR_REQUIRED}
/>
</div>
<div style={inputContainer}>
<Nunito20 style={inputLabel}>{COMPANY_FORM_INPUT_PHONE}</Nunito20>
<PhoneInputValidation
name="phoneNumber"
value={formik.phoneNumber}
handleInputChange={formik.handleChange}
hasError={formik.errors.phoneNumber}
validationMessage={formik.errors.phoneNumber}
/>
</div>
<div style={inputContainer}>
<Nunito20 style={inputLabel}>
{COMPANY_FORM_INPUT_EMPLOYEE_ROLE}
</Nunito20>
<InputValidation
type="text"
name="userRole"
value={formik.userRole}
handleInputChange={formik.handleChange}
hasError={formik.errors.userRole}
validationMessage={formik.errors.userRole}
/>
</div>
</div>
</div>
<div style={tickBoxContainer}>
<div style={checkBoxDiv}>
<Checkbox handleChange={formik.handleChange} name="personCheck" />
<NunitoBold18 style={checkBoxLabel}>{PERSON_CHECK}</NunitoBold18>
</div>
</div>
</div>
<SubmitButton style={submitButton} onClick={handleSubmit}>
{CONTINUE}
</SubmitButton>
</div>
);
};

Answer 1

尝试

使用validateOnChange和validateOnBlur道具并发布false值。

参见文档：

https://jaredpalmer.com/formik/docs/guides/validation#field-水平验证

https://jaredpalmer.com/formik/docs/api/formik#validateonblur-布尔

任何进一步的问题，请留下评论。。