yup

大変便利なreact-hook-form。 便利なreact-hook-formにはdefaultで使えるvalidation機能があります。 <input {...register('firstName', { required: true, max: { value: 10, message: 'error' } })} /> このような形でregisterで登録するときに、optionsを指定すれば、ある程度のvalidationを実装することは可能です。 ただ、複数の入力項目になった場合、componentの内部で設定を持つと見にくいですし、設定の仕方も少し直感的ではないです。 そこで…

aptpod Advent Calendar 2021の 23 日目を担当する、製品開発グループ intadsh チームの佐藤 (TK)です。 多言語化されたアプリケーションのフォームの開発で Yup を使ったスキーマを作成する機会があり Formik や、React Hook Form などのフォーム用のライブラリに適用する前に単体テストを実行したかったので作成してみました。 API ドキュメントをテスト仕様として定義するところから紹介したいと思います。 ゴール 技術 API ドキュメントからテスト仕様を定義する レッドパターンを洗い出す レッドパターンから文言を決める 多言語ライブラリを作…

こんにちは！アソビュー！でエンジニアをしている山内と申します。 最近の週末は、テントを担ぎながら山に登ってステーキを焼いて食べたりしています。最近、寒くなってきたので次は鍋でもしようかなと目論んでおります。（荷物が重くなりそう） 今回、社内の従業員用システムにて、フロントエンド側で動的なバリデーションを実装する機会がありました。その際Yupを用いて実装しましたので、紹介しようと思います。 Yupとは Yupとは、バリデーション用のスキーマビルダーです。また、フォーム作成のライブラリであるFormikとの相性がよく、今回のシステムはFormikを用いていたこともあり、Yupを利用しました。 実現…

cpoint-lab.co.jp React Hook Formとyupでフォームにバリデーションかけてます。 で、問題は、inputのtypeがnumberで、yupではnumber or nullでバリデーションかけたいとき。 yup.number() yup.number().nullable() だと、数字はいけますが、nullが入りません。 must be a `number` type, but the final value was: `NaN` (cast from the value `""`). どうすればええにゃーってなっていたところ、 github.com 上記のiss…