自己紹介
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にあげておきましたのでよかったらこちらからどうぞ。
わかりにくい、間違っているなどの指摘、意見等あればコメント欄にお願いします！！
ありがとうございました！