概要
react-hook-formを使ってバリデーションを実装します。
実装方法はReactと同様です。
完成イメージ
バリデーション実装
react-hook-formのインストール
react-hook-formというライブラリを使って、簡単にバリデーションを追加することができます。
npm install react-hook-form
宣言
Contact.jsを編集してreact-hook-formを適用していきます。
useForm()から必要なオブジェクトを宣言します。
| キーワード | 内容 |
|---|---|
| useForm | フォームを簡単に管理するためのカスタムフック |
| register | フォームに適用したいルールをフックに登録するメソッド |
| handleSubmit | バリデーションを通過したときにフォームのデータを受け取るメソッド |
| formState | フォームの状態や情報をすべて持っている。そのためここではバリデーションエラーのメッセージを取得している |
contact.js
import styles from '../styles/Contact.module.css';
+ import { useForm } from "react-hook-form";
export default function Contact() {
+ const {
+ register,
+ handleSubmit,
+ formState: { errors }
+ } = useForm();
コピペ用
const {
register,
handleSubmit,
formState: { errors }
} = useForm();
onSubmit関数設定
送信ボタンがクリックされたときに実行されるonSubmit関数を設定します。
これは、APIにデータを送る想定で記述しています。
contact.js
import styles from '../styles/Contact.module.css'
import { useForm } from "react-hook-form"
export default function Contact() {
const {
register,
handleSubmit,
formState:{errors}
} = useForm();
+ const onSubmit = (data) => {
+ const api_url = 'apiのURL';
+
+ fetch(api_url, {
+ method: "post",
+ headers: {
+ "Content-Type": "application/x-www-form-urlencoded",
+ },
+ body: encodeURI(`name=${data.name}&email=${data.email}&body=${data.body}`)
+ })
+ .then((response) => response.json())
+ .then((result) => alert(result.message))
+ .catch((error) => alert(error.message))
+ }
コピペ用
const onSubmit = (data) => {
const api_url = 'apiのURL';
fetch(api_url, {
method: "post",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
body: encodeURI(`name=${data.name}&email=${data.email}&body=${data.body}`)
})
.then((response) => response.json())
.then((result) => alert(result.message))
.catch((error) => alert(error.message))
}
formタグでonSubmit()関数呼び出し
フォームが送信されると、作成した関数onSubmit()関数を呼び出すようにformタグにonSubmitを設定します。
contact.js
- <form>
+ <form onSubmit={handleSubmit(onSubmit)}>
props追加
nameとemail、bodyフィールドに{...register(...)}というpropを追加します。
registerの中では、required属性とpattern属性、maxLength属性を指定します。
この2つにより、フィールドが正しくない場合にエラーを表示することができます。
それぞれの記述するとこのようになります。
contact.js（formのみ抜粋）
<form onSubmit={handleSubmit(onSubmit)}>
<div className={styles.form_group}>
<label>お名前</label>
<input type="text" id="name" {...register("name", { required: "お名前は必須です。" })} />
<span className={styles.form_error} id="name_error">お名前は必須です。</span>
</div>
<div className={styles.form_group}>
<label>email</label>
<input type="email" id="email" {...register("email", {
required: "emailは必須です。",
pattern: {
value: /^[a-z0-9.]+@[a-z]+\.[a-z]+$/,
message: "emailの形式で入力してください。"
}
})} />
<span className={styles.form_error} id="email_error">emailは必須かつemailの形式で入力してください。</span>
</div>
<div className={styles.form_group}>
<label>お問合せ内容</label>
<textarea id="body" rows={4} {...register("body", {
required: "お問合わせ内容は必須です。",
maxLength: {
value: 10,
message: "10文字以下で入力してください。"
}
})}></textarea>
<span className={styles.form_error} id="body_error">お問合せ内容は必須かつ1文字以上10文字以下で入力してください。</span>
</div>
<button className={styles.submit_btn} id="submit_btn">送信</button>
</form>
次に、エラーメッセージを動的に表示するようにコードを編集します。
各エラーメッセージを下記の様に{errors.name && 左の条件にマッチした場合の動作}を使ってエラーメッセージがあれば表示するようにします。
contact.js
<form onSubmit={handleSubmit(onSubmit)}>
<div className={styles.form_group}>
<label>お名前</label>
<input type="text" id="name" {...register("name", { required: "お名前は必須です。" })} />
- <span className={styles.form_error}>{errors.name.message}</span>
+ {errors.name && <span className={styles.form_error}>{errors.name.message}</span>}
</div>
<div className={styles.form_group}>
<label>email</label>
<input type="email" id="email" {...register("email", {
required: "emailは必須です。",
pattern: {
value: /^[a-z0-9.]+@[a-z]+\.[a-z]+$/,
message: "emailの形式で入力してください。"
}
})} />
- <span className={styles.form_error} id="email_error">emailは必須かつemailの形式で入力してください。</span>
+ {errors.email && <span className={styles.form_error}>{errors.email.message}</span>}
</div>
<div className={styles.form_group}>
<label>お問合せ内容</label>
<textarea id="body" rows={4} {...register("body", {
required: "お問合わせ内容は必須です。",
maxLength: {
value: 10,
message: "10文字以下で入力してください。"
}
})}></textarea>
- <span className={styles.form_error} id="body_error">お問合せ内容は必須かつ1文字以上10文字以下で入力してください。</span>
+ {errors.body && <span className={styles.form_error}>{errors.body.message}</span>}
</div>
<button className={styles.submit_btn} id="submit_btn">送信</button>
</form>
最終的なコード
最終的なコードはこのようになっています。
contact.js
import styles from '../styles/Contact.module.css';
import { useForm } from "react-hook-form";
export default function Contact() {
const {
register,
handleSubmit,
formState: { errors }
} = useForm();
const onSubmit = (data) => {
const api_url = 'apiのURL';
fetch(api_url, {
method: "post",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
body: encodeURI(`name=${data.name}&email=${data.email}&body=${data.body}`)
})
.then((response) => response.json())
.then((result) => alert(result.message))
.catch((error) => alert(error.message))
}
return (
<main className={styles.contact_form}>
<h2>お問合せ</h2>
<form onSubmit={handleSubmit(onSubmit)}>
<div className={styles.form_group}>
<label>お名前</label>
<input type="text" id="name" {...register("name", { required: "お名前は必須です。" })} />
{errors.name && <span className={styles.form_error}>{errors.name.message}</span>}
</div>
<div className={styles.form_group}>
<label>email</label>
<input type="email" id="email" {...register("email", {
required: "emailは必須です。",
pattern: {
value: /^[a-z0-9.]+@[a-z]+\.[a-z]+$/,
message: "emailの形式で入力してください。"
}
})} />
{errors.email && <span className={styles.form_error}>{errors.email.message}</span>}
</div>
<div className={styles.form_group}>
<label>お問合せ内容</label>
<textarea id="body" rows={4} {...register("body", {
required: "お問合わせ内容は必須です。",
maxLength: {
value: 10,
message: "10文字以下で入力してください。"
}
})}></textarea>
{errors.body && <span className={styles.form_error}>{errors.body.message}</span>}
</div>
<button className={styles.submit_btn} id="submit_btn">送信</button>
</form>
</main >
)
}
保存して動作確認をします。
ビルド
package.json編集
ページを公開できるようにするため、ビルドを実行します。
まず、package.jsonを編集してビルドスクリプトを更新します。
ビルドを実行し、生成されたファイルをoutフォルダに出力するようにします。
package.json
"scripts": {
"dev": "next dev",
- "build": "next build",
+ "build": "next build && next export",
"start": "next start",
"lint": "next lint"
},
ビルドする
ターミナルでnext-websiteフォルダ内にいることを確認して下記を実行します。
npm run build
するとファイルが生成されるのがターミナルでわかります。
今回は簡単なコーポレートサイトなので静的ページのみが生成され（Statice）に○がついているのがわかります。
フォルダを確認すると.nextフォルダとoutフォルダが増えています。
.nextフォルダにビルド結果が書き出されます。
outフォルダには生成されたHTMLファイルやJSファイルが格納されます。
確認
今まではnpm run devで一時的にビルドををしてサーバを起動して確認していましたが、ビルドした結果をサーバを起動して確認してみます。
npm run start
ブラウザで表示される内容に変化がない（ビルドによっておかしな挙動になってない）ことを確認して完成です。