Yup、formik和semantic-ui中的条件验证

Question

我是Formik的新手;是的验证。我有一些字段依赖于语义ui下拉。当我点击一个字段，一个特定的输入字段和下拉将打开。我无法正确地进行验证。我想当Facebook被选中时，这些字段显示验证而不是Instagram字段，当Instagram被选中时，只有这些字段显示验证而不是Facebook字段..这里是工作沙箱链接https://codesandbox.io/s/adoring-davinci-z4qlnw?file=/src/UserInfo.jsx我的验证代码在这里..

export const ProfessionalValidation = yup.object().shape({
category: yup.array().required('Category Name is required').nullable(),

FBfollowers: yup.string().required('Atleast One Flatform is required').nullable(),
Instafollowers: yup.string().required('Atleast One Flatform is required').nullable(),
facebookLink: yup.string().required('This Field is required').nullable(),
platform: yup.array().required('Atleast One Flatform is required').nullable(),
})

userinfo is here

import { ProfessionalValidation } from "./Validation";
import { ErrorMessage, Formik, Form, Field } from "formik";
import {
ageGroup,
categoryOptions,
Platform,
gender,
followers,
subscribers
} from "./Data";
import { Dropdown } from "semantic-ui-react";
import "./style.css";
import "./styles.css";
const UserInfo = () => {
const [selectedOptions, setOptions] = useState([]);
const [savedata, setSaveData] = useState([]);
const defaultValue = {
category: "",
platform: "",
facebookLink: "",
InstaLink: "",
Instafollowers: "",
FBfollowers: "",
subscribers: "",
youtube: ""
};
return (
<>

<Formik
initialValues={defaultValue}
validationSchema={ProfessionalValidation}
onSubmit={handleSubmit}
>
{({ values, setFieldValue }) => (
<Form>
<section className="form-styling my-4">
<div className="container">
<div className="input-box2">
<div>
<label htmlFor="category">Category*</label>
<Field
clearable
name={`category`}
fluid
multiple
search
selection
options={categoryOptions}
component={Dropdown}
placeholder="Select Category"
onChange={(_, { value }) =>
setFieldValue("category", value)
}
/>
<span style={{ color: "red" }}>
<ErrorMessage name="category" />
</span>
</div>
<div>
<label htmlFor="platform">Platform*</label>
<Field
clearable
name={`platform`}
fluid
multiple
search
selection
options={Platform}
placeholder="Select Platform"
component={Dropdown}
onChange={(_, { value }) => {
const onDropChange = () => {
setOptions(value);
setSaveData(selectedOptions);
setFieldValue("platform", value);
};
onDropChange();
}}
//onChange= {onDropChange}
/>
<span style={{ color: "red" }}>
<ErrorMessage name="platform" />
</span>
<span className="mt-3 d-block">Select at least 1</span>
</div>
</div>
{/* all selected platform show in this div */}
<div className="platform-box">
<div>
{selectedOptions.find((word) => word === "Facebook") &&
values.platform.find((word) => word === "Facebook") ? (
<div>
<div className="platform-details">
<div>
<h5>Facebook</h5>
</div>
<div>
<Field
type="text"
name="facebookLink"
placeholder="Account Link"
//onBlur={(value) => setFieldValue("facebookLink",value.currentTarget)}
/>
<span className="text-danger">
<ErrorMessage name="facebookLink" />
</span>
</div>
<div>
<Field
className="label ui selection fluid dropdown"
clearable
name={`FBfollowers`}
fluid
search
selection
options={followers}
component={Dropdown}
placeholder="Select followers"
onChange={(_, { value }) =>
setFieldValue("FBfollowers", value)
}
/>
<span className="text-danger">
<ErrorMessage name="FBfollowers" />
</span>
</div>
</div>
<span>Verify the Followers in 2-3 Business Days</span>
</div>
) : null}
{selectedOptions.find((word) => word === "Instagram") ? (
<div>
<div className="platform-details">
<div>
<h5>Instagram</h5>
</div>
<div>
<Field
type="text"
name="InstaLink"
placeholder="Account Link"
/>
</div>
<div>
<Field
className="label ui selection fluid dropdown"
clearable
name={`Instafollowers`}
fluid
search
selection
options={followers}
component={Dropdown}
placeholder="Select followers"
onChange={(_, { value }) =>
setFieldValue("Instafollowers", value)
}
/>
<span style={{ color: "red" }}>
<ErrorMessage name="Instafollowers" />
</span>
</div>
</div>
<span>Verify the Followers in 2-3 Business Days</span>
</div>
) : null}
</div>
</div>
</div>
{/* container end  */}
</section>
{/* additional info */}
<section className="additional-Info ">
<div className="container">
<div className="main-box"></div>
<div className="text-start my-5">
<button type="submit" className="border-0">
<span className="btn-form btn btn-info">Continue</span>
</button>
</div>
</div>
</section>
</Form>
)}
</Formik>
</>
);
};
export default UserInfo;

Answer 1

Yup提供用于混合验证的.whenapi。你可以像下面这样使用:

FBfollowers: yup
.string()
.when("platform", {
is: (val) => val?.includes("Facebook"),
then: yup.string().required("Atleast One Flatform is required"),
otherwise: yup.string()
})
.nullable(),

由于platform字段的值是一个数组，所以我使用.includes来检查用户是否选择了特定的平台。如果返回true，则该字段将是强制的，否则将是非强制的。

这里是validation.jsx文件的更新代码。

import * as yup from "yup";
export const ProfessionalValidation = yup.object().shape({
category: yup.array().required("Category Name is required").nullable(),
FBfollowers: yup
.string()
.when("platform", {
is: (val) => val?.includes("Facebook"),
then: yup.string().required("Atleast One Flatform is required"),
otherwise: yup.string()
})
.nullable(),
Instafollowers: yup
.string()
.when("platform", {
is: (val) => val?.includes("Instagram"),
then: yup.string().required("Atleast One Flatform is required"),
otherwise: yup.string()
})
.nullable(),
facebookLink: yup
.string()
.when("platform", {
is: (val) => val?.includes("Facebook"),
then: yup.string().required("This field is required"),
otherwise: yup.string()
})
.nullable(),
platform: yup.array().min(1, "Atleast one Field is required").nullable()
});

这是更新后的工作代码沙盒。

这里有更多关于Yup的.whenapi。

希望对你有帮助。