如何在测试中隐藏错误信息并只突出显示字段

Question

我有一个运行多个验证的模式。但我不想在出现错误时显示一些错误消息，尽管我希望突出显示该字段。给出一个空字符串而不是错误消息会导致formik在验证运行时没有显示红色输入字段。这是我当前的代码

const LocationDetailsSchema = Yup.object().shape({
location: Yup.string(),
locationCategory: Yup.string(),
lat: Yup.number()
.min(-85, "Not a valid Latitude")
.max(85, "Not a valid Latitude")
.nullable()
.transform(function(value) {
return this.isType(value) ? value : null;
})
.test(
"match",
"", //empty string fails, putting a text shows but i don't want the text to appear
function(){
if (principalAmount>=500000) return true;
return false;
}
),
lon: Yup.number()
.min(-180, "Not a valid Longitude")
.max(180, "Not a valid Longitude")
.nullable()
.transform(function(value) {
return this.isType(value) ? value : null;
})
.test(
"match",
"Is valid", // this works but i don't want the text to appear either
function(){
if (principalAmount>=500000) return true;
return false;
}
),
});

Answer 1

您可能希望这样使用formik，以便您可以访问字段的错误，如果他们有任何:

<Formik
initialValues={initialValues}
onSubmit={onSubmit}
validationSchema={validationSchema}
>
{(props) => {
return (
<Form>
<Input
style={{
direction: "rtl",
border:
props.touched.name && props.errors.name ? "red" : "none",
}}
onBlur={() => props.setFieldTouched("name")}
onChange={(e) => props.setFieldValue("name", e.target.value)}
props={props}
className={""}
/>
</Form>
);
}}
</Formik>

在这里我应用边框样式的组件，如果它被触摸和有错误:

border : props.touched.name && props.errors.name ? "red" : "none",

你可以使用这个方法来应用你自己的逻辑和样式。