英文:
Yup validation based on value of another select field
问题
我有两个选择输入 pickUpTime 和 dropOffTime 在 react-hook-form 中，用一个字符串数组填充。数组 intervalTime 是按照15分钟间隔排列的时间段。
const IntervalTime = [
'09:00',
'09:15',
'09:30',
...
]
如果 dropOffTime 在 pickUpTime 之前，我想要添加一个错误，我考虑比较所选时间段的索引来实现这个目标。
resolver: yupResolver(yup.object({
pickUpTime: yup.string().required('required'),
dropOffTime: yup.string().when(['pickUpTime', 'dropOffTime'], {
is: (pickUpTime, dropOffTime) =>
IntervalTime.indexOf(dropOffTime) < IntervalTime.indexOf(pickUpTime),
then: yup.string().required('Drop off time must be after pick up time'),
}),
}))
但我得到了 Error: Cyclic dependency, node was:"dropOffTime" 的错误消息。
英文:
I have two select inputs pickUpTime and dropOffTime in react-hook-form populated with an array of strings. The array intervalTime is an ordered time slots with a 15 minutes interval
const IntervalTime = [
'09:00',
'09:15',
'09:30',
...
]
I want to add an error if dropOffTime is before pickUpTime and I thought of comparing the indexes of the selected time slots to do so
resolver: yupResolver(yup.object({
pickUpTime: yup.string().required(t('required')),
dropOffTime: yup.string().when(['pickUpTime', 'dropOffTime'], {
is: (pickUpTime, dropOffTime) =>
IntervalTime.indexOf(dropOffTime) < IntervalTime.indexOf(pickUpTime),
then: yup.string().required('Drop off time must be after pick up time'),
}),
}))
but I get Error: Cyclic dependency, node was:"dropOffTime"
答案1
得分: 1
只需使用.test()并编写您自定义的验证规则。
英文:
just use .test() and write your custom validation rules.
答案2
得分: 0
你可以使用评论中提到的 transform() 方法之外，作为另一种选择，你可以使用 test 方法。这可能会更容易使用。
英文:
Other than using transform() stated in the comments, as an alternative, you can use the test method. It might feel easier to use.
答案3
得分: 0
I solved it like this:
resolver: yupResolver(yup.object({
pickUpDate: yup.date().required(t('required')),
pickUpTime: yup.string().required(t('required')),
dropOffDate: yup.date().min(yup.ref('pickUpDate'), t('date-before')).required(t('required')),
dropOffTime: yup.string().test('time', 'Drop off time must be after pick up time', function (value) {
const { pickUpTime, pickUpDate, dropOffDate } = this.parent;
if (!pickUpTime || !pickUpDate || !dropOffDate || !value) return true; // skip validation if any field is empty
return (dropOffDate > pickUpDate) || (dayjs(dropOffDate).date() === dayjs(pickUpDate).date() && dayjs(dropOffDate).month() === dayjs(pickUpDate).month() && IntervalTime.indexOf(value) >= IntervalTime.indexOf(pickUpTime));
}).required(t('required')),
}))
I added a bit of validation to check if dropOffDate is after pickUpDate. In that case, there's no need to check time as well.
英文:
I solved it like this:
resolver: yupResolver(yup.object({
pickUpDate: yup.date().required(t('required')),
pickUpTime: yup.string().required(t('required')),
dropOffDate: yup.date().min(yup.ref('pickUpDate'), t('date-before')).required(t('required')),
dropOffTime: yup.string().test('time', 'Drop off time must be after pick up time', function (value) {
const { pickUpTime, pickUpDate, dropOffDate } = this.parent;
if (!pickUpTime || !pickUpDate || !dropOffDate || !value) return true; // skip validation if any field is empty
return (dropOffDate > pickUpDate) || (dayjs(dropOffDate).date() === dayjs(pickUpDate).date() && dayjs(dropOffDate).month() === dayjs(pickUpDate).month() && IntervalTime.indexOf(value) >= IntervalTime.indexOf(pickUpTime));
}).required(t('required')),
}))
I added a bit of validation to check if dropOffDate is after pickUpDate. In that case there's no need to check time as well.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论