LoginSignup
2
1

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-12-15

バリデーションエラー時に、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']のようにエラーの有無でクラスの配列引数を変えています。

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

image.png

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1