バリデーションエラー時に、Formファザードで作ったタグにエラー用のCSSクラスをあてる方法を調べました。
ルーティングと簡単なコントローラーを用意します。
routes/web.php
Route::get('/form', 'FormController@index');
Route::post('/form', 'FormController@post');
app/Http/Controllers/FormController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class FormController extends Controller
{
public function index()
{
$list = [
'' => '選択してください',
'1' => 'ほげ',
'2' => 'ふが',
];
return view('form', compact('list'));
}
public function post(Request $request)
{
$request->flash();
$request->validate([
'text' => 'required',
'id' => 'required',
],[
'text.required' => 'テキストを入力してください。',
'id.required' => 'リストを選択してください。',
]);
return redirect('form')->with('flash_message', '送信完了しました。');
}
}
テンプレートを用意します。
デフォルトのレイアウトとCSSを流用しています。
resources/views/Form.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
@if (session('flash_message'))
<div class="alert alert-success" role="alert">
{{ session('flash_message') }}
</div>
@endif
<div class="card">
<div class="card-header">フォーム</div>
<div class="card-body">
{{Form::open(['url' => '/form'])}}
{{Form::token()}}
<div class="form-group">
{{Form::text('text',
old('text'),
$errors->has('text') ? ['class' => 'form-control is-invalid', 'placeholder' => '入力してください']
: ['class' => 'form-control', 'placeholder' => '入力してください'])}}
<span class="invalid-feedback" role="alert">@error('text'){{ $message }}@enderror</span>
</div>
<div class="form-group">
{{Form::select('id',
$list,
old('id'),
$errors->has('id') ? ['class' => 'form-control is-invalid']
: ['class' => 'form-control']
)}}
<span class="invalid-feedback" role="alert">@error('id'){{ $message }}@enderror</span>
</div>
{{Form::submit('送信', ['class'=>'btn btn-primary'])}}
{{Form::close()}}
</div>
</div>
</div>
</div>
</div>
@endsection
三項演算子で、$errors->has('id') ? ['class' => 'form-control is-invalid'] : ['class' => 'form-control']
のようにエラーの有無でクラスの配列引数を変えています。
バリデーションエラーがあるとこんな感じでエラーの装飾があたります。