![[Laravel入門]TODOアプリを作成しよう(バリデーション)](https://codelikes.com/wp-content/uploads/2021/06/c9d0aadd04f11b055dba91d43da708805_.png)
前回はTODOの削除機能を作成しました。
今回はTODOを追加するときのバリデーションを追加していきます。
入力内容が下記の場合には、エラーにして画面にエラーメッセージを表示します。
・空入力
・文字数が少ない(3文字以下)
・文字数が多い(100文字以上)
TODOコントローラーのaddメソッドにバリデーション追加
app/Http/Controllers/TodoController.phpのファイルを開きます。
その後にaddメソッドの先頭に下記のように追加するとバリデーションすることが可能です。
public function add(Request $request) {
$request->validate([
'content' => 'required|min:3|max:100'
]);
// ----- 省略 -----
}
解説
まずリクエストがあると、引数でRequest(Illuminate\Http\Request)クラスのインスタンスを受け取ります。
受け取ったインスタンスからvalidateメソッドを呼ぶことでバリデーションすることができます。
validateメソッドに渡すのはバリデーションの項目とルールです。
左にPOSTまたはGETされた項目名を書きます。これはテキストボックスのname属性の値です。
右にバリデーションのルールを書きます。
それぞれのルールを「|」で区切ることが可能です。
この書き方の他にも下記のように配列で定義することもできます。
$request->validate([
'content' => ['required', 'min:3', 'max:100']
]);
エラーのルールについては、Laravelに最初から用意されています。
今回使ったのは下記になります。
| 項目 | バリデーション内容 |
|---|---|
| required | 必須 |
| min:n | 最小値チェック。 「n」の箇所に必要な文字数を書く |
| max:n | 最大値チェック。 「n」の箇所に最大で入れれる文字数を書く(n文字以内) |
今回はvalidateメソッドを使用しましたが、FormRequestを事前に用意しておくことで、コントローラーをスッキリとさせることが可能です。
FormRequestについては下記の記事を参照してください。
TODOビューにエラーメッセージの表示エリアを作成する
バリデーションエラーになると、エラーとしてレスポンスがコントローラーから返ってきます。
返ってきたエラーのレスポンスを表示する必要があるので、bladeビューを修正します。
resources/views/todolist.blade.phpを開いて、下記のように修正します。
<!---- 省略 ----->
<!---- ここから追加する ----->
@if ($errors->any())
<ul class="border border-red-400 bg-red-100 px-4 py-3 text-red-700 mb-10 w-4/5 m-auto">
@foreach ($errors->all() as $error)
<li>{{$error}}</li>
@endforeach
</ul>
@endif
<!---- ここまで追加する ----->
<form method="post" id="todo_form">
@csrf
<input type="hidden" name="select_todo_id" id="select_todo_id" value="" />
<!---- 省略 ----->
解説
エラーがある場合にエラーが表示されるように修正しました。
@if ($errors->any()) でエラーがある場合を判定しています。
@endifまでに書いてある内容が、trueだった場合は表示されます。
ul-liのタグを内部で出力しています。
@foreach ($errors->all() as $error)で全てのエラー分、繰り返してくれます。
例えばエラーが２つある場合は、それぞれliタグを使用して、2回のエラーメッセージが出力されます。
エラーメッセージの日本語化
現在の状態でもバリデーションできますが、このままだと下記のように英語のままになっています。
ここでは、英語から日本語に変更してみます。
resources/lang/jaディレクトリを作成する
resources/lang/enをコピーして、同じ階層にjaディレクトリを作成します。
このディレクトリのファイルにはバリデーション時のエラーメッセージや、画面に表示するメッセージを定義します。
下記のようにresources/lang配下にenとjaディレクトリが並びます。
バリデーションメッセージファイル(validation.php)を修正する
ディレクトリをコピーした後に、jaの方の下記のファイルを開いて編集します。
resources/lang/ja/validation.php
このように修正してください。
1 maxのstring項目の値を日本語にします。
'max' => [
'numeric' => 'The :attribute must not be greater than :max.',
'file' => 'The :attribute must not be greater than :max kilobytes.',
'string' => ':attributeは:max文字以内で、記入してください。',
'array' => 'The :attribute must not have more than :max items.',
],
2 minのstring項目の値を日本語にします。
'min' => [
'numeric' => 'The :attribute must be at least :min.',
'file' => 'The :attribute must be at least :min kilobytes.',
'string' => ':attributeは:min文字以上で、記入してください。',
'array' => 'The :attribute must have at least :min items.',
],
3 requiredの項目の値を日本語にします。
'required' => ':attributeは必須です。',
ここまでの1〜3はバリデーション時のメッセージを日本語にしています。
:attributeの箇所にはリクエストで、送信された項目名が入ります。
今回はcontentが入りますが、わかりにくいため下記のようにcontentだった場合はTODOを表示するようにします。
4 ファイルの最下部のattributesを下記のようにします。
'attributes' => [
'content' => 'TODO'
],
config/app.phpに日本語ファイルを使うように設定する
デフォルトでは英語になっています。（resources/lang/enディレクトリを使うようになっています。)
config/app.php を修正して、今回作成したjaディレクトリが使用されるようにします。
下記のように修正してください。
'locale' => 'ja',
動作確認
http://localhost:8085/を開きます。
TODOを空で入力します…
TODOに2文字入力して、登録してみます…
TODOに100文字入力して、登録してみます…
それぞれ、バリデーションのエラーが表示されるようになりました！
終わりに
今回はバリデーションできるようにしてみました。
簡単に実装できることが体験できたのではないでしょうか。
今回で最終回でしたが、いかがでしたか。
Laravelの機能を使用すると、簡単に機能を実装することができたと思います。
TODOを作り終えて、主に下記のことができるようになったかと思います。
・モデルの作成
・webルーティング
・モデルからデータを取得して、一覧を作成
・モデルからデータを追加
・モデルからデータを更新
・モデルからデータを削除
今回学んだ内容や成果物をもとにして、「カスタマイズしてみる・新しくアプリケーションを作成する」などして、Laravelについて学んでいってもらえればと思います。
最後に広告になりますが😅
ボリュームのある内容でこちらに教材を公開しています。
PHPのみで実装した後に、Laravelで同じように実装してLaravelの良さが体験できる内容になっています。
コメント