【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チームでも積極的に取り入れるようにしております。
慣れれば格段に開発効率も上がるので、おすすめの手法です。
TEXT BY
SAKAMOTO
Webエンジニア
Web制作会社にて2年勤務後、2016年にタイガーラック株式会社へ入社。 入社後、フロントエンドからバックエンド、デザイン、広告運用まで幅広く担当。広く満遍なく対応できるのが強み。趣味はポケモンカードとブラジリアン柔術。対戦よろしく
このカテゴリの最新記事
2024.03.22
2024.07.23
2024.03.22
2023.04.19
