yup validation, one of three has to be filled out

huangapple go评论70阅读模式
英文:

yup validation, one of three has to be filled out

问题

I have an issue with some yup validation...
I have a form with a lot of fields - In this form, the user needs to fill in at least one of three fields: Username, Email or Phone

const userSchema = yup
  .object()
  .shape({
    username: yup.string().when(['email', 'phone'], {
      is: (email, phone) => !email && !phone,
      then: yup.string().required('Username is required')
    }),
    email: yup.string().email('Please enter a valid email'),
    phone: yup.string().when(['username', 'email'], {
      is: (username, email) => !username && !email,
      then: yup.string().required('Phone is required')
    }),
    password: yup
      .string()
      .min(8, 'Password must be 8 characters long')
      .matches(/[0-9]/, 'Password requires a number')
      .matches(/[a-z]/, 'Password requires a lowercase letter')
      .matches(/[A-Z]/, 'Password requires an uppercase letter')
      .matches(/[^\w]/, 'Password requires a symbol')
      .required('Password is required')
  })
  .required();

However, I'm getting errors on this: index.js:45 Uncaught (in promise) Error: Cyclic dependency

What am I doing wrong?

英文:

I have an issue with some yup validation...
I have a form with a lot of fields - In this form, the user needs to fill in at least one of three fields: Username, Email or Phone

const userSchema = yup
  .object()
  .shape({
    username: yup.string().when(['email', 'phone'], {
      is: (email, phone) => !email && !phone,
      then: yup.string().required('Username is required')
    }),
    email: yup.string().email('Please enter a valid email'),
    phone: yup.string().when(['username', 'email'], {
      is: (username, email) => !username && !email,
      then: yup.string().required('Phone is required')
    }),
    password: yup
      .string()
      .min(8, 'Password must be 8 characters long')
      .matches(/[0-9]/, 'Password requires a number')
      .matches(/[a-z]/, 'Password requires a lowercase letter')
      .matches(/[A-Z]/, 'Password requires an uppercase letter')
      .matches(/[^\w]/, 'Password requires a symbol')
      .required('Password is required')
  })
  .required();

However, Im getting errors on this: index.js:45 Uncaught (in promise) Error: Cyclic dependency

What am i doing wrong?

答案1

得分: 0

In yup,需要按特定顺序排列依赖字段的构建顺序。在您的代码中,username 依赖于字段 phone 进行验证,但 phone 又依赖于 usename 进行验证。您必须在将字段 phone 的值传递给字段 username 之前进行类型转换和强制转换,或者反之亦然。

在您的情况下,您的模式必须类似于:

const userSchema = yup
  .object()
  .shape({
    ...
  }, [
    ['username', 'phone'],
  ])

您可以在这里了解更多信息。

英文:

In yup, it is necessary to arrange dependency fields in a specific order of construction. In your code, username depends on field phone to validate, but phone depends on usename to validate. you must cast and coerce the value in field phone before passing it to field username, or vice versa

In your case, your schema must be something like:

const userSchema = yup
  .object()
  .shape({
  ...
  }, [
  ['username', 'phone'],
  ])

You can read more about it here

huangapple
  • 本文由 发表于 2023年6月29日 16:38:43
  • 转载请务必保留本文链接:https://go.coder-hub.com/76579405.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定