最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Validate if one out of 3 field is not empty using Yup JS - Stack Overflow

programmeradmin0浏览0评论

I have 3 fields phone1, phone2 and phone3. I want to do a validation so it should alert if all are empty. Means if any one of these 3 field have value then the validation should Pass and don't alert.

I have used Yup library for this. Right now I have create below code which actually requires all the 3 fields. Which I don't want.

yup.object().shape({
    phone1: yup
        .string()
        .required("Please enter Phone 1"),
    phone2: yup
        .string()
        .required("Please enter Phone 2"),
    phone3: yup
        .string()
        .required("Please enter Phone 3"),
});

I belive I have to use .test() method of Yup JS which allows custom validation but I am not sure how I can write it in this situation. I am using Express framework to read requests.

I have 3 fields phone1, phone2 and phone3. I want to do a validation so it should alert if all are empty. Means if any one of these 3 field have value then the validation should Pass and don't alert.

I have used Yup library for this. Right now I have create below code which actually requires all the 3 fields. Which I don't want.

yup.object().shape({
    phone1: yup
        .string()
        .required("Please enter Phone 1"),
    phone2: yup
        .string()
        .required("Please enter Phone 2"),
    phone3: yup
        .string()
        .required("Please enter Phone 3"),
});

I belive I have to use .test() method of Yup JS which allows custom validation but I am not sure how I can write it in this situation. I am using Express framework to read requests.

Share Improve this question edited Jan 25, 2022 at 9:29 Shahnawaz Hossan 2,7202 gold badges15 silver badges24 bronze badges asked Jun 27, 2020 at 8:12 aslamdoctoraslamdoctor 3,94512 gold badges57 silver badges103 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 6
const schema = yup.object().shape({
  phone1: yup.string().when(['phone2', 'phone3'], {
    is: (phone2, phone3) => !phone2 && !phone3,
    then: yup.string().required('Please enter one of the three fields')
  }),
  phone2: yup.string().when(['phone1', 'phone3'], {
    is: (phone1, phone3) => !phone1 && !phone3,
    then: yup.string().required('Please enter one of the three fields')
  }),
  phone3: yup.string().when(['phone1', 'phone2'], {
    is: (phone1, phone2) => !phone1 && !phone2,
    then: yup.string().required('Please enter one of the three fields')
  })
}, [['phone1', 'phone2'], ['phone1', 'phone3'], ['phone2','phone3']])

Then you can check this validation through this way:

schema.validate({ phone1: '', phone2: '', phone3: '' }).catch(function (err) {
  console.log(err.errors[0]);
});

Enter any of the three fields for getting no error message.

e.g

schema.validate({ phone1: '', phone2: '123', phone3: '' }).catch(function (err) {
  console.log(err.errors[0]);
});
发布评论

评论列表(0)

  1. 暂无评论