はじめに (対象読者・この記事でわかること)

この記事は、Laravelを使用したWeb開発に取り組んでいる方を対象としています。特にフォームのバリデーションとエラーメッセージの表示カスタマイズに興味がある方に最適です。

この記事を読むことで、Laravelのフォームリクエストクラスでエラーメッセージに複数のCSSクラスを適用する方法がわかります。Bootstrap以外のCSSフレームワークを使用する際のカスタマイズ方法も学べます。実際の開発で役立つ実践的なテクニックを習得し、より柔軟なフォームデザインを実現できるようになります。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。

  • PHPとLaravelの基本的な知識
  • HTML/CSSの基本的な知識
  • Laravelのフォームリクエストとバリデーションの基本的な理解

Laravelフォームバリデーションの基本と課題

Laravelのフォームバリデーション機能は非常に強力で、簡単な記述で入力値の検証とエラーメッセージの表示が実装できます。特にForm::modelやForm::openと組み合わせて使用する際には、$errors変数を通じて自動的にエラーメッセージが表示されます。

しかし、デフォルトの実装ではエラーメッセージに適用されるCSSクラスは単一（通常はhas-errorやis-invalidなど）に限定されています。特にBootstrap以外のCSSフレームワークを使用する場合や、デザイン要件に合わせて複数のクラスを適用したい場合、この制限が開発の妨げになることがあります。

例えば、以下のような状況では複数クラスの適用が必要になります： - 複数のCSSフレームワークを併用している場合 - エラー状態に応じて異なるスタイルを適用したい場合 - カスタムCSSとフレームワークのクラスを同時に適用したい場合

この記事では、この課題を解決する具体的な方法を解説します。

複数のCSSクラスを適用する実装方法

ステップ1：デフォルトの実装確認

まず、Laravelのデフォルトのフォームリクエストクラスを使用した基本的な実装方法を見ていきましょう。

Php

// app/Http/Requests/StorePostRequest.php
namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class StorePostRequest extends FormRequest
{
    public function authorize()
    {
        return true;
    }

    public function rules()
    {
        return [
            'title' => 'required|max:255',
            'content' => 'required',
        ];
    }
}

このフォームリクエストをコントローラーで使用する際には、以下のように記述します。

Php

// app/Http/Controllers/PostController.php
namespace App\Http\Controllers;

use App\Http\Requests\StorePostRequest;
use Illuminate\Http\Request;

class PostController extends Controller
{
    public function store(StorePostRequest $request)
    {
        // バリデーションを通過した場合の処理
        return redirect()->route('posts.index')->with('success', '投稿が作成されました');
    }
}

ビューファイルでは、以下のようにエラーメッセージを表示します。

Html

// resources/views/posts/create.blade.php
<form action="{{ route('posts.store') }}" method="POST">
    @csrf

    <div class="form-group">
        <label for="title">タイトル</label>
        <input type="text" class="form-control @error('title') is-invalid @enderror" id="title" name="title">
        @error('title')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="form-group">
        <label for="content">内容</label>
        <textarea class="form-control @error('content') is-invalid @enderror" id="content" name="content" rows="5"></textarea>
        @error('content')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <button type="submit" class="btn btn-primary">投稿する</button>
</form>

この実装では、@error('title')ディレクティブがis-invalidクラスを動的に追加していますが、単一のクラスしか適用できません。

ステップ2：カスタムエラーメッセージの設定

複数のクラスを適用するには、まずカスタムエラーメッセージの設定方法を理解する必要があります。フォームリクエストクラスでmessagesメソッドをオーバーライドすることで、デフォルトのエラーメッセージをカスタマイズできます。

Php

// app/Http/Requests/StorePostRequest.php
namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class StorePostRequest extends FormRequest
{
    public function authorize()
    {
        return true;
    }

    public function rules()
    {
        return [
            'title' => 'required|max:255',
            'content' => 'required',
        ];
    }

    public function messages()
    {
        return [
            'title.required' => 'タイトルは必須です',
            'title.max' => 'タイトルは255文字以内で入力してください',
            'content.required' => '内容は必須です',
        ];
    }
}

ステップ3：カスタムフォームリクエストの拡張

複数のCSSクラスを適用するには、フォームリクエストクラスを拡張する方法が効果的です。まず、カスタムフォームリクエストベースクラスを作成します。

Bash

php artisan make:request BaseRequest

次に、このベースクラスに複数クラスを適用するためのロジックを実装します。

Php

// app/Http/Requests/BaseRequest.php
namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest as LaravelFormRequest;

class BaseRequest extends LaravelFormRequest
{
    /**
     * エラーメッセージに適用するCSSクラスを取得
     *
     * @return string
     */
    public function getErrorClass()
    {
        // デフォルトのクラスを返す
        return 'is-invalid';
    }
}

次に、このベースクラスを継承した具体的なフォームリクエストクラスを作成します。

Php

// app/Http/Requests/StorePostRequest.php
namespace App\Http\Requests;

class StorePostRequest extends BaseRequest
{
    public function authorize()
    {
        return true;
    }

    public function rules()
    {
        return [
            'title' => 'required|max:255',
            'content' => 'required',
        ];
    }

    public function messages()
    {
        return [
            'title.required' => 'タイトルは必須です',
            'title.max' => 'タイトルは255文字以内で入力してください',
            'content.required' => '内容は必須です',
        ];
    }

    /**
     * エラーメッセージに適用するCSSクラスを取得
     * 複数のクラスをスペース区切りで返す
     *
     * @return string
     */
    public function getErrorClass()
    {
        // 複数のクラスをスペース区切りで返す
        return 'is-invalid custom-error-class';
    }
}

ステップ4：ビューでのカスタムクラスの適用

ビューファイルでは、カスタムフォームリクエストクラスのgetErrorClassメソッドを呼び出して、複数のCSSクラスを適用します。

Html

// resources/views/posts/create.blade.php
<form action="{{ route('posts.store') }}" method="POST">
    @csrf

    <div class="form-group">
        <label for="title">タイトル</label>
        <input type="text" class="form-control {{ request()->has('title') ? $errors->has('title') ? app(\App\Http\Requests\StorePostRequest::class)->getErrorClass() : '' : '' }}" 
               id="title" name="title" value="{{ old('title') }}">
        @error('title')
            <div class="{{ app(\App\Http\Requests\StorePostRequest::class)->getErrorClass() }}-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="form-group">
        <label for="content">内容</label>
        <textarea class="form-control {{ request()->has('content') ? $errors->has('content') ? app(\App\Http\Requests\StorePostRequest::class)->getErrorClass() : '' : '' }}" 
                  id="content" name="content" rows="5">{{ old('content') }}</textarea>
        @error('content')
            <div class="{{ app(\App\Http\Requests\StorePostRequest::class)->getErrorClass() }}-feedback">{{ $message }}</div>
        @enderror
    </div>

    <button type="submit" class="btn btn-primary">投稿する</button>
</form>

この実装では、app(\App\Http\Requests\StorePostRequest::class)->getErrorClass()で複数のCSSクラスを取得し、フォーム要素とエラーメッセージの両方に適用しています。

ステップ5：より簡潔な実装方法（カスタムディレクティブの使用）

上記の方法は機能しますが、ビューファイルが冗長になる可能性があります。より簡潔な実装として、カスタムディレクティブを作成する方法があります。

まず、サービスプロバイダーでカスタムディレクティブを登録します。

Php

// app/Providers/AppServiceProvider.php
namespace App\Providers;

use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    public function register()
    {
        //
    }

    public function boot()
    {
        Blade::directive('errorClass', function ($field) {
            return "<?php echo request()->has({$field}) ? \$errors->has({$field}) ? app(\App\Http\Requests\StorePostRequest::class)->getErrorClass() : '' : ''; ?>";
        });
    }
}

次に、ビューファイルでこのカスタムディレクティブを使用します。

Html

// resources/views/posts/create.blade.php
<form action="{{ route('posts.store') }}" method="POST">
    @csrf

    <div class="form-group">
        <label for="title">タイトル</label>
        <input type="text" class="form-control @errorClass('title')" 
               id="title" name="title" value="{{ old('title') }}">
        @error('title')
            <div class="@errorClass('title')-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="form-group">
        <label for="content">内容</label>
        <textarea class="form-control @errorClass('content')" 
                  id="content" name="content" rows="5">{{ old('content') }}</textarea>
        @error('content')
            <div class="@errorClass('content')-feedback">{{ $message }}</div>
        @enderror
    </div>

    <button type="submit" class="btn btn-primary">投稿する</button>
</form>

この方法では、ビューファイルがよりクリーンで読みやすくなります。

ハマった点やエラー解決

問題1：クラスが適用されない

現象：フォーム要素にエラークラスが適用されない。

原因： - フォームリクエストクラスのgetErrorClassメソッドが正しく実装されていない - ビューファイルでのクラスの適用方法が間違っている - フォームがリダイレクトされていないため、エラー情報が保持されていない

解決策： 1. フォームリクエストクラスのgetErrorClassメソッドが正しく実装されているか確認 2. ビューファイルでのクラスの適用方法を修正 3. フォーム送信後にリダイレクト処理が正しく行われているか確認

Php

// コントローラー例
public function store(StorePostRequest $request)
{
    // バリデーションを通過した場合の処理
    return redirect()->route('posts.create')->with('success', '投稿が作成されました');
}

問題2：クラスの順序が意図通りでない

現象：複数のCSSクラスが適用されるが、意図した順序で適用されていない。

原因： - CSSの優先順位の問題 - クラスの指定順序が意図通りではない

解決策： 1. CSSの優先順位を考慮してクラスの順序を調整 2. !importantを使用して特定のスタイルを優先させる

Php

// app/Http/Requests/StorePostRequest.php
public function getErrorClass()
{
    // 優先順位を考慮したクラスの順序を指定
    return 'custom-error-class is-invalid';
}

問題3：JavaScriptとの干渉

現象：フォームの動作がJavaScriptと干渉して意図通りに動作しない。

原因： - JavaScriptがフォームのクラスを動的に変更している - エラークラスの適用タイミングとJavaScriptの実行タイミングが競合している

解決策： 1. JavaScriptがフォームのクラスを変更する前にエラークラスが適用されるように調整 2. カスタムイベントを使用してエラー状態をJavaScriptに通知

Javascript

// JavaScriptの例
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form');

    form.addEventListener('submit', function() {
        // フォーム送信前にエラークラスを確認
        const errorElements = form.querySelectorAll('.is-invalid');
        if (errorElements.length > 0) {
            // エラーがある場合の処理
            console.log('フォームにエラーがあります');
        }
    });
});

まとめ

本記事では、Laravelのフォームエラーメッセージに複数のCSSクラスを適用する方法を解説しました。具体的には、以下の方法を紹介しました：

  1. カスタムフォームリクエストクラスの作成と拡張
  2. getErrorClassメソッドの実装による複数クラスの取得
  3. ビューファイルでのクラスの適用方法
  4. カスタムディレクティブを使用した簡潔な実装

このテクニックを使えば、Bootstrap以外のCSSフレームワークを使用する場合でも、エラーメッセージに複数のクラスを適用でき、より柔軟なフォームデザインが可能になります。また、JavaScriptとの連携もスムーズに行えるようになります。

今後は、この技術を応用して、動的なクラス適用や条件付きクラス適用についても記事にする予定です。

参考資料