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アプリケーション開発

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

【Vue.js】コンポーネントのテストコードをvue-test-utilsとJestで実装

1 はじめに2 セットアップ3 コンポーネントのテスト3.1 Shallow 描画3.2 基本的な例3.3 プロパティを渡す3.4 ユーザーの操作をシミュレーションする3.5 イベントを検証する3.6 ...

js

JavaScriptのみでPOSTした場合のCSRFトークンの認証に関するTIPS

1 はじめに2 実装2.1 なぜエラーが発生したか2.2 修正後のコード3 さいごに はじめに RailsアプリケーションでPOSTリクエストを送る場合、多くの場合はform_withなどのヘルパーを ...

Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみた【2018.03.24】

1 はじめに1.1 作るもの1.2 前提条件、及び環境1.3 Webpack について2 準備2.1 Rails + Vue.jsのプロジェクトを作成する2.2 Vue.jsの表示確認2.3 devサ ...

docker-syncでファイルの同期を高速化する

1 はじめに2 docker-syncの導入3 設定ファイルの作成3.1 docker-composer.yml3.2 docker-compose-dev.yml3.3 docker-sync.ym ...

Vue 3とVuex 4とTypeScriptでタイプセーフに開発する

1 はじめに1.1 インストール1.2 Storeの設定2 Storeの作成3 StoreをComponentから使用する4 $storeプロパティに型をつける5 さいごに6 おすすめ書籍 はじめに ...

フォロー

blog-page_side_responsive

2022年2月
 12345
6789101112
13141516171819
20212223242526
2728  

アプリ情報

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