【 Yup 】 schema 条件分岐
yup の when や is を使ったバリデーションルールの条件分岐についてです。yup のバージョンの問題で一部若干シンタックスが変わったところがあったらしくそこで躓いたので書いておきます。( ググった時に旧フォーマットの記事が多めだったのもあり)
実現したいこと
ある input にて lastName が存在する場合 firstName を必須にしたい。
旧 when フォーマット
以下のような形式で以前はできたらしい。
firstName: yup.string().when('lastName',{
is: (lastName: string) => lastName,
then: yup.string().required('firstName is required'),
})しかしこのような形にするとバリデーション実行時にコンソールエラーで 「TypeError: branch is not a function 」とのエラーが表示されてしまいます。
新 when フォーマット
firstName: yup.string().when('lastName',{
is: (lastName: string) => lastName,
then: (schema) => schema.required('firstName is required'),
})上記のように then を schema を引数にとるファンクションにするような形式にするとうまくいく様でした。 then の次に otherwise を指定する場合も同様 otherwise: (schema) => schema の様にする必要がある様でした。
最後に
現在 Nuxt3 + VeeValidate + yup でのバリデーションとインプットの実装をしていて一部詰まった部分の紹介でした。そのうち上記組み合わせでのバリデーションの全体像の方も記事にできたらと思います。
以下学習用書籍
