redux-formのvalidationを実装する

前回の記事に引き続きredux-formについてです。
今回はvalidationを実装していきます。

 

公式ドキュメント

Github
https://github.com/erikras/redux-form

公式ページ
https://redux-form.com/7.2.0/

 

validationを実装する

 

validationというのはどんなのかというと、以下の画像のようなものです。

他にも電話番号のフォームで数字以外があればエラー表示したり、
メールアドレスのフォームで、変な形式だとエラーを表示したりするあれのことです。
こういったvalidationもredux-formを使えば比較的簡単に作成することができます。

 

最小のvalidation

 

こちらがFieldの子コンポーネント

 

こちらが親コンポーネント。

 

 

ここが本題ですが、validationのルールを組みます。
これがvalidation用のコンポーネントです。
公式や、issueなど色々な場所を見てみると、で色々な書き方があるっぽいですが、
僕はこの記事を参考にしました。

 

以下のファイルをComponents/Validate.jsxとして保存します。

 

一つのフォームに復数のvalidationを実装する場合

 

先の記事を見てみると、一つのFieldに復数のvalidationを付けるときにはlistにするっぽいのですが
なぜかできなかったので、復数用のvalidationを別個で用意しました。
これは上と同じファイル内(Components/Validate.jsx)に記載します。

 

これもまた、上と同じようにvalidate属性でセットします。

コメントを残す