React Hook Form で超簡単にバリデーションする方法

インストール

npmでライブラリのインストールをしましょう。

$ npm install react-hook-form

一つだけのバリデーション

準備ができたのでさっそく使ってみましょう。
最初に入力が必須のバリデーションを設定してみます。
InputFormというフォーム用のコンポーネントを作る想定で進めます。

import React, { useState } from 'react'
import { useForm } from 'react-hook-form'
 
type FormData = {
	title: string
}
 
const InputForm: React.FC = () => {
	const { register, handleSubmit, errors, reset } = useForm<FormData>()
 
	const handleOnSubmit = (data: FormData) => {
		console.log(data.title);
		reset()
	}
 
	return (
		<div>
			<form onSubmit={handleSubmit(handleOnSubmit)}>
				<input
					type="text"
					className={errors.title && 'error'}
					name="title"
					ref={register({
                        required: 'タイトルは必ず入力してください。'
                    })}
				/>
				{ errors.title && <span className="error-message">{ errors.title.message }</span> }
				<button className="btn is-primary">追加</button>
			</form>
		</div>
	)
}
 
export default InputForm

2行目

useFormを使用するので、インポートしましょう。

3〜6行目

TypeScriptを使用している場合はフォームに使用する型を設定します。

9行目

useFormで使用する機能を変数に入れます。

11行目

フォームが送信されたとき実行される関数です。（18行目で設定してます。）
引数は設定したFormDataの形式で扱うことができます。
reset関数でインプットに入力した値をクリアーすることができます。

18行目

formにhandleSubmitを設定する必要があるので基本的にそのまま書きます。

21行目

エラーの時inputにもスタイル設定したいときは書きます。

23行目

バリデーションはrelに設定します。
「入力必須」の場合は、required: 'エラーメッセージ'という形で設定します。

27行目

エラーがあったとき表示するメッセージです。
エラーになるとerrors.title.messageにregisterで設定した文字列が入ります。

複数のバリデーション

先ほどは必須だけでしたが、基本的には文字数を設定したりとか複数のバリデーションを組み合わせるのがほとんどだと思います。
必須条件に追加して、3文字以上、100文字以下の条件を追加してみましょう。

registerを次の様に変更しましょう。

<input
	type="text"
	className={errors.title && 'error'}
	name="title"
	ref={register({
		required: 'タイトルは必ず入力してください。',
		minLength: { value: 3, message: 'タイトルは3文字以上入力してください。' },
		maxLength: { value: 100, message: 'タイトルは100文字以内で入力してください。' }
	})}
/>

minLengthとmaxLengthに関しては制御する文字数も必要なので、value、messageの形で設定します。

正規表現でカスタムバリデーションを設定する方法

バリデーションタイプは最低限のものしか用意されていないので、独自に設定する場合はpatternを使います。

<input
	type="text"
	className={errors.title && 'error'}
	name="title"
	ref={register({
		required: '必ず入力してください。',
		pattern: {
			value: /^\d{3}-\d{4}$/,
			message: '正しい郵便番号を入力してください。'
		}
	})}
/>

基本的な使い方は以上です。
その他にも色々機能がありますので詳しくは、下記ドキュメントをご確認ください。

React Hook Form

この記事の動画（Youtube）版はこちら！