タイガーラック クリエイティブブログ
2024
September
05

【Laravel】Livewireでリアルタイムバリデーションを実装する

弊社で管理しているECサイトでは、問い合わせフォームをはじめ、見積依頼フォームなど、あらゆるところでフォームを作ることが多いのですが、今回はLaravelのLivewireという機能を使ってリアルタイムバリデーションを実装する方法を紹介します。

Livewireのインストール

composerを使ってインストールします。

$ composer require livewire/livewire

コンポーネントの作成

次にartisanコマンドを使ってコンポーネントを作成します。

今回は新規会員登録フォームを例にするので、コンポーネント名はRegisterFormとします。

$ php artisan make:livewire RegisterForm

上記のコマンドを実行すると、以下2つのファイルが自動生成されます。

  • app/Http/Livewire/RegisterForm.php
  • resources/views/livewire/register-form.blade.php

この後、RegisterForm.php では主にバリデーションルールなどを定義し、register-form.blade.php にはフォームのビューをコーディングしていきます。

コンポーネントの編集

今回はメールアドレスと氏名の入力欄に対し、バリデーションを実装します。

バリデーションの対象をクラス変数として定義し、それぞれにルールを定義しています。

<?php
namespace App\Http\Livewire;
use Livewire\Component;

class RegisterForm extends Component
{
    public $email;
    public $name;

    protected $rules = [
        'email' => ['required', 'string', 'email', 'max:255'],
        'name' => ['required', 'string', 'max:16'],
    ];

    public function updated($propertyName)
    {
        $this->validateOnly($propertyName);
    }
}

次にビューをコーディングしましょう。

<div>
    <div class="row mb-3">
        <label for="email" class="col-md-4 col-form-label text-md-end">
            メールアドレス
        </label>

        <div class="col-md-6">
            <input id="email" type="email" wire:model.lazy="email" class="@error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required>

            @error('email')
                <span class="invalid-feedback" role="alert">{{ $message }}</span>
            @enderror
        </div>
    </div>


    <div class="row mb-3">
        <label for="name" class="col-md-4 col-form-label text-md-end">
            氏名
        </label>

        <div class="col-md-6">
            <input id="name" type="text" wire:model.lazy="name" class="@error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required>

            @error('name')
                <span class="invalid-feedback" role="alert">{{ $message }}</span>
            @enderror
        </div>
    </div>

    // ...以下略
</div>

ビューを書く上で注意点があり、ルート要素は一つにしないといけないため全体をdivで囲む必要があります。

そして、バリデーション対象の要素に wire:model.lazy=”” を追加します。
この部分は、リアルタイムバリデーションを実装する上で以下2つの選択肢がありますので、仕様に合わせて選びます。

バリデーション発火のタイミング
wire:model.lazyフォーカスが外れた時
wire:modelキー入力で値が変更された時

コンポーネントの読み込み

あとはWebページのビューとなるファイルから、コンポーネントを読み込めば完了です。

<form action="{{ route('register') }}" method="post">
    @csrf

    <livewire:register-form>
</form>

Livewireを使うことで、JavaScriptを一切書かず、PHPのみでリアルタイムバリデーションを実装することができました。

JavaScriptでのバリデーションはどうしてもコードが汚くなったり、管理が大変だったりすることが多いので、Livewireを使った実装方法は弊社のWebチームでも積極的に取り入れるようにしております。

慣れれば格段に開発効率も上がるので、おすすめの手法です。

このカテゴリの最新記事

関連記事

SHOP LIST

タイガーラック株式会社

〒577-0056
大阪府東大阪市長堂1-3-14 TOKUYASU Bld.