我有一个使用Formik库创建事件的表单。我需要检查开始日期是否与结束日期重叠,反之亦然。我有两个选择日期和时间的日期选择器。我如何使用Yup来验证这一点,并在重叠时显示错误消息?
先谢谢你的帮助
const validationSchema = Yup.object().shape({
eventName: Yup.string()
.min(1, "Must have a character")
.max(10, "Must be shorter than 255")
.required("Must enter an event name"),
email: Yup.string()
.email("Must be a valid email address")
.max(255, "Must be shorter than 255")
.required("Must enter an email"),
eventStartDate: Yup.date()
.required("Must enter start date"),
eventEndDate: Yup.date()
.required("Must enter end date")
})
var defaultValue = new Date().toDateString
export default function EventForm(){
return (
<Formik
initialValues={{eventName: "", email: "", }}
validationSchema={validationSchema}
onSubmit={(values, {setSubmitting, resetForm}) => {
setTimeout(() => {
}}
>
{ ({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
isSubmitting
}) => (
<form onSubmit={handleSubmit}>
<div className="input-row">
<TextField
id="eventName"
label="Event Name"
margin="normal"
variant="filled"
onChange={handleChange}
onBlur={handleBlur}
value={values.eventName}
className={touched.eventName && errors.eventName ? "has-error" : null}
/>
<Error touched={touched.eventName} message={errors.eventName}/>
</div>
<div className="dateHolder">
<div className="startDate">
<TextField
id="eventStartDate"
label="Event Start Date"
type="datetime-local"
InputLabelProps={{
shrink: true
}}
format="yyy-dd-mm HH:MM:ss"
onChange={handleChange}
onBlur={handleBlur}
value={values.eventStartDate}
/>
<Error touched={touched.eventStartDate} message={errors.eventStartDate}/>
</div>
<div className="endDate">
<TextField
id="eventEndDate"
label="Event End Date"
type="datetime-local"
InputLabelProps={{
shrink: true
}}
format="yyy-dd-mm HH:MM:ss"
onChange={handleChange}
onBlur={handleBlur}
value={values.eventEndDate}
/>
<Error touched={touched.eventEndDate} message={errors.eventEndDate}/>
</div>
</div>
<div className="input-row">
<button type="submit" disabled={isSubmitting} >
Submit
</button>
</div>
</form>
)}
</Formik>
)
}
4条答案
按热度按时间tgabmvqs1#
使用
ref
它工作得很好kokeuurv2#
可以使用
when
条件:bz4sfanl3#
Nader的回答对我有用。但是我有一些额外的验证条件,如果一个复选框被选中,那么在结束日期之前验证日期开始日期。所以,我想出了这个代码。留下以防将来有人需要这个
无条件
nhaq1z214#