Formファサードでバリデーションエラー時にCSSクラスをあてる

バリデーションエラー時に、Formファザードで作ったタグにエラー用のCSSクラスをあてる方法を調べました。

---

ルーティングと簡単なコントローラーを用意します。

routes/web.php

Copied!

Route::get('/form', 'FormController@index');
Route::post('/form', 'FormController@post');

app/Http/Controllers/FormController.php

Copied!

<?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

Copied!

@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']のようにエラーの有無でクラスの配列引数を変えています。

バリデーションエラーがあるとこんな感じでエラーの装飾があたります。