More than 5 years have passed since last update.

Laravelでの各Form要素でのValidationやエラー制御（のメモ）

Last updated at 2015-08-13Posted at 2015-08-13

Laravelにかぎらず、いろいろなフレームワークにForm処理に関する便利機能がありますが、input textではうまく動くものでも、checkboxやfile処理とかだと結局使えず、むしろイライラすることありますね。。。

ここではいざというときに困らないようにFormの主要要素とLaravelのバリデーション、さらにはBootstrapとの組み合わせをまとめておきたいと思います。本当は、各バーツ毎にテストしたいのですが、とりあえずここでは全体をメモ。

##やりたいこと

Laravel + Bootstrapを利用してFormデータのエラー処理パターンをまとめておきたい。

細かく書くと、

正常時の値の受け取り(checkboxとか選択しないとそもそもnullのやつの扱いとかチェック）。
エラーの検知（Validation）。
エラー時の表示の整理（エラーメッセージの受け取り方、表示やスタイル変更制御）。
入力値の保持方法（Laravelでは基本Input::old('hoge')の利用）。
checkboxやfile等のおろそかになりがちな要素との連携チェック。

あたりを整理しておきたい。

##Formのビュー

formを表示するviewをviews/form.blade.phpとして作成。

エラー時にForm要素に対して、下記のようにエラーが出力されるようにする。
下記キャプチャは全てのエラーが出力されてた場合（ルールが複数設定されている要素は最初のエラーを表示）。

ポイントとしては、

<div class="form-group">で全体をくくれる要素はくくる
くくれない要素は、エラーメッセージだけをくくる
エラーの表示、クラスの変更は@if(!empty($errors.first('name'))) has-error @endifという感じで。
値の維持は基本Input::old('name')で。
select,checkbox等は、@if(Input::old('name')=='name') selected @endifという感じで。

あたり。それを考慮した記述が下記。

共通レイアウト layout.blade.php

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>

	<div class="container">
		@yield('content')
	</div>

<!-- js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
	@yield('script')
</script>
</body>
</html>

肝心の中身。テスト用のform.blade.php。少々複雑ですが、とりあえず全ソースをペースト。

@extends('layout')

@section('content')

	<h1 style="margin-bottom:30px;">新規登録</h1>

	<!-- form -->
	<form method="post" action="/store" enctype="multipart/form-data">

		<!-- input type="text" string -->
		 <div class="form-group @if(!empty($errors->first('name'))) has-error @endif">
			<label>名前</label>
			<input type="text" name="name" value="{{Input::old('name')}}" class="form-control">
			<span class="help-block">{{$errors->first('name')}}</span>
		</div>

		<!-- input type="text" string confirm -->
		 <div class="form-group @if(!empty($errors->first('email'))) has-error @endif">
			<label>E-Mail</label>
			<input type="text" name="email" value="{{Input::old('email')}}" class="form-control">
			<span class="help-block">{{$errors->first('email')}}</span>
		</div>

		<div class="form-group @if(!empty($errors->first('email_confirmation'))) has-error @endif">
			<label>E-Mail（再入力）</label>
			<input type="text" name="email_confirmation" value="{{Input::old('email_confirmation')}}" class="form-control">
			<span class="help-block">{{$errors->first('email_confirmation')}}</span>
		</div>

		<!-- input type="text" int -->
		 <div class="form-group @if(!empty($errors->first('age'))) has-error @endif">
			<label>年齢</label>
			<input type="text" name="age" value="{{Input::old('age')}}" class="form-control">
			<span class="help-block">{{$errors->first('age')}}</span>
		</div>

		<!-- select -->
		 <div class="form-group @if(!empty($errors->first('area'))) has-error @endif">
			<label>エリア</label>
			<select name="area" class="form-control">
				<option value="">選択して下さい</option>
				<option value="option1" @if(Input::old('area')=="option1") selected @endif>オプション１</option>
				<option value="option2" @if(Input::old('area')=="option2") selected @endif>オプション２</option>
			</select>
			<span class="help-block">{{$errors->first('area')}}</span>
		</div>

		<!-- radio -->
		<p><b>性別</b></p>
		<div class="radio-inline">
			<label>
				<input type="radio" name="gender" value="man" @if(Input::old('gender')=="man") checked @endif> 男
			</label>
		</div>
		<div class="radio-inline">
			<label>
				<input type="radio" name="gender" value="woman" @if(Input::old('gender')=="woman") checked @endif> 女
			</label>
		</div>
		 <div class="form-group @if(!empty($errors->first('gender'))) has-error @endif">
			<span class="help-block">{{$errors->first('gender')}}</span>
		</div>

		<!-- checkbox -->
		<p><b>告知メディア</b></p>
		<div class="checkbox">
			<label>
				{{-- <input type="hidden" name="media1" value="none"> --}}
				<input type="checkbox" name="media1" value="web" @if(Input::old('media1')=="web") checked @endif> Web
			</label>
		</div>
		 <div class="form-group @if(!empty($errors->first('media1'))) has-error @endif">
			<span class="help-block">{{$errors->first('media1')}}</span>
		</div>

		<div class="checkbox">
			<label>
				{{-- <input type="hidden" name="media2" value="none"> --}}
				<input type="checkbox" name="media2" value="TV" @if(Input::old('media2')=="TV") checked @endif> TV
			</label>
		</div>
		 <div class="form-group @if(!empty($errors->first('media2'))) has-error @endif">
			<span class="help-block">{{$errors->first('media2')}}</span>
		</div>


		<!-- textarea -->
		 <div class="form-group @if(!empty($errors->first('note'))) has-error @endif">
			<label>感想</label>
			<textarea name="note" class="form-control" rows="3">{{Input::old('note')}}</textarea>
			<span class="help-block">{{$errors->first('note')}}</span>
		</div>

		<!-- file -->
		 <div class="form-group @if(!empty($errors->first('image'))) has-error @endif">
			<label>画像</label>
			<input type="file" name="image">
			<span class="help-block">{{$errors->first('image')}}</span>
		</div>

		<!-- token -->
		<input type="hidden" name="_token" value="{{csrf_token()}}">

		<input type="submit" value="登録" class="btn btn-primary">

	</form>

@stop

##コントローラ（バリデーション実行）

とりあえず、上記のエラー時表示をテストするためのもの。
formからの値を受け取りバリデート。NGならviewに戻し、OKならstore.blade.phpにリダイレクトし、受け取った内容を表示するものとする。ファイル名はFormController.phpとした。

コントローラーのコードは、Laravelのスマートな？Validation記述のお陰でそれほど複雑ではない。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;
use App\Http\Controllers\Controller;

class FormController extends Controller
{
    //
    public function form()
    {
        return view('form');
    }

    public function store(Request $request)
    {

        //inputs
        $inputs = $request->all();

        //rules
        $rules = [
            'name'=>'required|min:6|max:10',
            'email'=>'required|email|confirmed',
            'age'=>'required|numeric',
            'area'=>'required',
            'gender'=>'required',
            'media1'=>'required',
            'media2'=>'required',
            'note'=>'required|max:10',
            'image'=>'required|image|max:100', //kbyte
        ];

        //validation
        $validation = \Validator::make($inputs,$rules);

        //if fails
        if($validation->fails())
        {
            return redirect()->back()->withErrors($validation->errors())->withInput();
        }

        //バリデーションOK

        //fileは個別に処理
        $file = \Input::file('image');
        if(!empty($file))
        {
            $filename = $file->getClientOriginalName();
            $move = $file->move('./',$filename); //public
        }
        else
        {
            //ファイルアップロードが無いときは変数を初期化（viewでのエラー防止）
            $inputs["image"] = "none";
        }
       

        //
        return view('store',compact('inputs'));
    }
}

##OKだったとき受け取った値を表示するビュー

バリデーションがOKなら、store.blade.phpにて値を表示。エラー時は、冒頭の画面が表示される。

ソースは、こんな感じ。ただ表示しているだけ。

@extends('layout')

@section('content')

	<h1>内容表示</h1>

	<div class="row">
		<div class="col-sm-12">
			<a href="/form" class="btn btn-primary" style="margin:20px;">フォームに戻る</a>
		</div>
	</div>

	<!-- table -->
	<table class="table table-striped">
		<tr><td>名前</td><td>{{$inputs["name"]}}</tr>
		<tr><td>E-Mail</td><td>{{$inputs["email"]}}</tr>
		<tr><td>年齢</td><td>{{$inputs["age"]}}</tr>
		<tr><td>エリア</td><td>{{$inputs["area"]}}</tr>
		<tr><td>性別</td><td>{{$inputs["gender"]}}</tr>
		<tr><td>メディア</td><td>{{$inputs["media1"]}}</tr>
		<tr><td>メディア</td><td>{{$inputs["media2"]}}</tr>
		<tr><td>感想</td><td>{{$inputs["note"]}}</tr>
		<tr><td>ファイル</td><td>{{$inputs["image"]}}</tr>
	</table>

@stop

104

116

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up