自己紹介

HAL大阪の2回生で、サーバーサイドエンジニアを目指して修行しています。
初めて記事を書くので至らないところが多々あると思いますが、暖かい目で見守ってやってください。

前提

Laravelの導入はこちらを参考にさせていただきました。

では早速本題へ

今回は、シンプルなフォームを作成してその入力チェックをしてみたいと思います。

ビューの作成

まず、resources/viewsの中にpagesディレクトリを作成し、フォームのviewファイルを作成します

いい感じにサンプルフォームを作成

resorce/views/pages/form.blade.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>sampleForm</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>
    <h1 class="text-center">Sample Form</h1>

    <form id="sampleForm" action="/form/result" method="POST">
      {!! csrf_field() !!}
        <div class="row">
            <div class="form-group col-md-4 col-md-offset-4">
                <label for="name">Name</label>
                <input type="text" class="form-control" id="name" name="name" placeholder="Name" value="{{ old('name') }}">
                @if ($errors->has('name'))
                    <span class="help-block">
                        <strong>{{ $errors->first('name') }}</strong>
                    </span>
                @endif
            </div>

            <div class="form-group col-md-4 col-md-offset-4">
                <label for="email">Email</label>
                <input type="email" class="form-control" id="email" name="email" placeholder="Email" value="{{ old('email') }}">
                @if ($errors->has('email'))
                    <span class="help-block">
                        <strong>{{ $errors->first('email') }}</strong>
                    </span>
                @endif
            </div>

            <div class="form-group col-md-4 col-md-offset-4">
                <label for="password">Password</label>
                <input type="password" class="form-control" id="password" name="password" placeholder="Password">
                @if ($errors->has('password'))
                    <span class="help-block">
                        <strong>{{ $errors->first('password') }}</strong>
                    </span>
                @endif
            </div>

            <div class="form-group col-md-4 col-md-offset-4">
                <label for="password-confirm">Password-confirm</label>
                <input type="password" class="form-control" id="password-confirm" name="password_confirmation" placeholder="Password-confirm">
                @if ($errors->has('password_confirmation'))
                    <span class="help-block">
                        <strong>{{ $errors->first('password_confirmation') }}</strong>
                    </span>
                @endif
            </div>

            <div class="form-group col-md-4 col-md-offset-4">
                <input type="submit" class="btn btn-default col-md-12" value="送信">
            </div>
        </div>
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    </body>

</html>

いい感じに入力値を表示するビューを作成

resorce/views/pages/formResult.blade.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>sampleForm</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>
    <h1 class="text-center">正しい値が送信されました。</h1>
    <table class="col-md-4 col-md-offset-4">
        <tr style="border-bottom: solid 1px;">
            <th>name : </th>
            <td>{{$name}}</td>
        </tr>
        <tr style="border-bottom: solid 1px;">
            <th>email : </th>
            <td>{{$email}}</td>
        </tr>
        <tr style="border-bottom: solid 1px;">
            <th>password : </th>
            <td>{{$password}}</td>
        </tr>
    </table>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    </body>

</html>

リクエストの作成

artisanを利用してリクエストの雛形を作成します。

php artisan make:request FormRequest

すると、app/Http/Requests配下にFormRequest.phpが生成されますので、以下のように編集

app/Http/Requests/FormRequest.php

<?php

namespace App\Http\Requests;

use App\Http\Requests\Request;

class FormRequest extends Request
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true; //trueに変更
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
        //バリデーションルールの設定
            'name' => 'required|max:10',
            'email' => 'required',
            'password' => 'required|min:8|confirmed',
            'password_confirmation' => 'required|min:8',
        ];
    }
}

コントローラーの作成

こちらもまたartisanを利用してコントローラーの雛形を作成します。

php artisan make:controller FormController

実行するとapp/Http/Controllers配下にFormController.phpが生成されますので、こちらは下記のように書き換える。

app/Http/Controllers/FormController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;
//作成したリクエストをuse
use App\Http\Requests\FormRequest;

class FormController extends Controller
{
    //formResultメソッドを作成
    //※引数に注目※
    public function formResult(FormRequest $request)
    {
        //入力値を表示させるviewを返す
        return view('pages.formResult', $request->all());
    }
}

こんな風に、formResultメソッドで利用するリクエストを指定します。
FormRequestのバリデートを通過した場合のみformResultメソッドの処理が実行されるので、controllerのコードがシンプルになり、非常に便利な機能ですね。

最後にルーティングを設定

app/Http/routes.php

Route::get('/form', function () {
    return view('pages.form');
});

Route::post('/form/result', 'FormController@formResult');

ちょっとまて、エラーメッセージが英語じゃないか。

心配しないでください、ちゃんとエラーメッセージも指定できます。
FormRequestにmessagesメソッドを実装しましょう。

app/Http/Requests/FormRequest.php

public function messages()
{
    return [
    'name.required' => 'nameを入力してください。',
    'name.max' => 'nameは10字以内でお願いします。',
    'email.required' => 'emailを入力してください。',
    'password.required' => 'passwordを入力してください。',
    'password.min' => 'passwordは8字以上でお願いします。',
    'password.confirmed' => '確認passwordと一致しません。',
    'password_confirmation.required' => '確認用passwordを入力してください。',
    'password_confirmation.min' => '確認用passwordも8字以上でお願いします。',
    ];
}

こんな感じで簡単にバリデーションを実装できるようになっています。

あとがき

えー、今回はシンプルなカスタムリクエストでバリデーションを行ってみましたが、
次記事を書く機会がありましたら自分でバリデーションルールを追加する方法でも書いてみようかなと思います。

ソースコードはgitにあげておきましたのでよかったらこちらからどうぞ。

わかりにくい、間違っているなどの指摘、意見等あればコメント欄にお願いします！！

ありがとうございました！