FrontEnd

React Hook Form (v7) とMUI (v5) だけでバリデーションを実装

投稿日:

はじめに

React Hook Formは、Yupなどのvalidation系パッケージと組み合わせて使うことができますが、複雑なバリデーションが不用な場合は、React Hook Form単体でもバリデーションを実装することができます。今回は、MUIのhelperTextにReact Hook Formで検知したバリデーションエラーを表示させる方法を紹介します。

バリデーションエラーをMUIのhelperTextに表示する

バリデーション実装の全体感

まずはシンプルに、20文字以内の入力必須のテキストフィールドと、選択必須のフィールドを作ってみます。MUIのコンポーネントを使用するため、Controllerを使用します。

上記のコード簡単に説明します。まずは、バリデーションエラーを表示するために必要なhookです。

errorsは FieldErrors<TFieldValues> 型となっているので、次のように、useFormで指定した型のプロパティ名でエラーを取得することができます。

ここでいう userNameiceCreamType は、エラーが無い場合はundfinedとなるので、この仕組みを使ってMUIのhelperTextに表示させます。

上記のコードで、Controllerコンポーネントのrulesに、バリデーションルールを登録していきます。用意されているバリデーションとしては、次のものがあります。

  • required
  • min / max
  • minLength/ maxLength
  • pattern

そして、TextFieldコンポーネントのerrorとhelperTextプロパティをセットすれば、バリデーションエラーが表示されるようになります。

他のフィールドに関連するバリデーション

他のフィールドに関連するバリデーションを作成するには、 validate にチェック用関数を渡すことで、実装することができます。ここでは、メールアドレスの確認フォームを追加してみます。

2つめのControllerでvalidateに関数を渡しています。この時の第一引数には、入力された値が入ります。関数の中で他のパラメータを使用するには、 useForm フックの getValues() を使用します。
バリデーションエラーがあれば、表示させたいメッセージをreturnすることで、 errors にメッセージが入ります。

CodeSandbox

今回のコードをまとめたCodeSandboxを公開しています。
https://codesandbox.io/s/react-hook-form-f0mwh?file=/src/ExampleForm.tsx

 

さいごに

React Hook Formはフォーム実装のコードを軽減することができるので、今後も機能をキャッチアップして使っていきたいと思います!

おすすめ書籍

Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発

page_footer_responsive




-FrontEnd
-, ,

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

tailwindcss

Tailwind CSSの基礎とVue.jsへの導入

1 はじめに2 Tailwind CSSとは2.1 utility class3 Bootstrapとの比較3.1 柔軟性3.2 コード量3.3 学習コスト3.4 ファイルサイズ3.5 その他4 なぜ ...

もうすぐ登場!Vue 3の変更点まとめ

1 はじめに2 仕様変更2.1 複数のv-modelが定義可能に2.2 template直下に複数のタグを記述可能に2.3 開始処理がcreateAppに2.4 scoped cssの仕様変更2.5 ...

JQueryとmark.jsでマークダウンのリアルタイムプレビューをつくる

1 はじめに1.1 環境2 mark.js2.1 公式ドキュメント2.2 インストール2.3 実際に使用してみる2.4 オプションについて3 プレビュー機能3.1 vue.jsに関して3.2 JQue ...

React Router v7 + Cloudflare PagesでのOGPタグ設定とOGP画像生成

1 はじめに2 OGPタグの設定2.1 全体で共通の設定2.2 meta()関数による動的な設定3 OGP画像の生成3.1 @vercel/ogの導入3.2 middlwareの実装4 OGPチェッカ ...

AMPに対応してモバイルページを高速に表示させる

1 はじめに2 AMPとは3 なぜAMPでは高速に表示されるのか3.1 非同期スクリプトのみを許可3.2 リソース読み込みに優先度を付ける3.3 プリレンダリング4 AMPの3要素4.1 AMP HT ...

フォロー

blog-page_side_responsive

2022年2月
 12345
6789101112
13141516171819
20212223242526
2728  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。