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


関連記事

js

今さらChart.jsでグラフ描画

1 はじめに2 準備3 折れ線グラフと棒グラフ3.1 コード全体3.2 html3.3 JS4 円グラフ4.1 html4.2 JS5 さいごに6 おすすめ書籍 はじめに JSのチャートライブラリは色 ...

js

Reactを始める前に知っておきたいES2015/ES6の機能

1 はじめに2 ECMAScript – ES2015/ES6とは3 変数と定数とスコープ4 テンプレート文字列5 分割代入6 デフォルト引数7 残余引数(レストパラメータ)8 展開(スプ ...

Cordovaの実機デバッグでハマった話

1 はじめに2 Cordovaとは2.1 React Nativeとの違い3 Cordovaでモバイルアプリを作る3.1 Node.jsをインストール3.2 Cordovaのコマンドラインツールをイン ...

icon

TypeScript初心者が押さえておくべき型システム

1 はじめに2 型アノテーション2.1 プリミティブ型2.2 リテラル型2.3 any2.4 nullとundefined2.5 ユニオン型2.6 交差型2.7 タプル型2.8 列挙型2.9 配列2. ...

Vue.js入門その7〜セレクトボックスを動的に変更してみる〜

1 はじめに1.1 サンプル2 とりあえず作ってみる2.1 ソースコード2.2 セレクトボックスにv-modelでバインド2.3 <option>はv-forでリストレンダリング2.4 メ ...

フォロー

blog-page_side_responsive

2022年2月
 12345
6789101112
13141516171819
20212223242526
2728  

アプリ情報

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