Laravel フォームバリデーションエラーの対応

この記事のゴール
前提条件
これからやる作業
フォームのBladeテンプレート編集
ブラウザで表示確認

この記事のゴール

入力フォームにバリデーションエラーのメッセージを表示する。

前提条件

入力フォームのバリデーション実施はできている。

　※まだの場合は、前回の記事を参考にしてください。

これからやる作業

フォームのBladeテンプレート編集
ブラウザで表示確認

フォームのBladeテンプレート編集

[resources/views/todo/create.blade.php] を編集して保存します。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>{{$pageTitle}}</title>
        <style>
            .error-input {
                background-color: #ffee33;
            }
            .error {
                background-color: #ffcccc;
                color: #ff0000;
            }
        </style>
    </head>
    <body>
        <h1>{{$pageTitle}}</h1>
        @if($errors->any())
        <ul>
            @foreach($errors->all() as $error)
            <li class="error">{{$error}}</li>
            @endforeach
        </ul>
        @endif
        <form method="POST" action="{{route('todo.store')}}">
            @csrf
            <label>やること：</label>
            <input type="text" name="todo" size="40" maxlength="255"
                value="{{old('todo')}}"
                class="@error('todo') error-input @enderror" />
            <input type="hidden" name="done" value="0" />
            <button type="submit" id="submit">登録</button>
        </form>
        <a href="{{route('todo.index')}}">取消</a>
    </body>
</html>

6行目～14行目にエラー用のスタイルシートを追記しています。

18行目から24行目にエラーメッセージの一覧表示を追記しています。

28行目から30行目で入力欄に元の入力値を表示する処理と、

エラー時にスタイルを適用する処理を入れています。

34行目にTODOリストページへのリンクを追加しています。

ブラウザで表示確認

ブラウザのアドレスバーに http://localhost/todo/ を入力してアクセスします。

前回登録した「Dプロジェクト立ち上げ」までを含めた４件が表示されています。

「新規登録」をクリックして入力フォームへ移動します。

必須チェックできているかを確認します。[F12]キーでDeveloperツールを開き、

要素タブでページのHTML要素を表示させます。

<input type="hidden" name="done" value="0" >

の箇所で「value=”0″」の部分をダブルクリックして、値の０を削除します。

<input type="hidden" name="done" value="" >

この状態で、ページ内の「登録」ボタンをクリックします。

メッセージが英語ですが、必須チェックの確認ができました。

次のページを参考にすると日本語化できます。

404 Not Found

また、対応する箇所の数が少なければ、テンプレート内で個別に対応するか、

自分用のライブラリを作っても良いかもしれません。

この記事では、英語メッセージのまま進めていきます。

次に、「todo」項目の文字列長チェックと、「done」項目の値チェック

について確認していきます。

先程と同様に、次のように要素を編集します。

<input type="text" name="todo" size="40" maxlength="256" value="" class=" error-input ">
<input type="hidden" name="done" value="2">

「maxlength=”255″」の箇所を「maxlength=”256″」に修正します。

「value=”0″」の箇所を「value=”2″」に修正します。

この状態で、ページの「やること」の入力欄に、256文字以上の文字列を入力してから

「登録」ボタンをクリックします。

この際、入力した「todo」項目は256文字に切り取られて送信されます。

「todo」項目の入力が256文字で切られて送信さたものがエラーになっています。

「done」項目の入力値「2」がエラーになっています。

本来はもっと多くのパターンをチェックする必要がありますが、

それは次回以降の自動テストの記事でカバーしていきます。

もう一つ確認することは、「やること」の入力欄に、

送信前の値が表示されていることです。

Laravel のバリデーション機能では、エラーメッセージは自動的に

テンプレートに渡されるようになっています。

また、送信時の入力値は、セッションに保存されていて、

テンプレート側では old(‘項目名’) で参照することができます。

では、最後にバリデーションでエラーにならない値を入力して登録してみましょう。

バリデーションを通過して正常登録されると、TODOリストに移動します。

バリデーションを通過して登録されていることが確認できました。

今回はここまでです。お疲れさまでした。