Livewire 2.x バリデーション

Livewireのバリデーションは、Laravelの標準的なフォームバリデーションと同じように感じるはずです。つまり、Livewireは、コンポーネントごとにバリデーションルールを設定するための$rulesプロパティと、それらのルールを使用してコンポーネントのプロパティをバリデートするための$this->validate()メソッドを提供しています。

Livewireにおけるフォームのバリデーションの簡単な例をご覧ください。

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

    protected $rules = [
        'name' => 'required|min:6',
        'email' => 'required|email',
    ];

    public function submit()
    {
        $this->validate();

        // バリデーション失敗の場合、ここまで実行されない

        Contact::create([
            'name' => $this->name,
            'email' => $this->email,
        ]);
    }
}
<form wire:submit.prevent="submit">
    <input type="text" wire:model="name">
    @error('name') <span class="error">{{ $message }}</span> @enderror

    <input type="text" wire:model="email">
    @error('email') <span class="error">{{ $message }}</span> @enderror

    <button type="submit">Save Contact</button>
</form>

バリデーション失敗の場合、標準のValidationExceptionが投げられ(そして、Livewireがキャッチして)、標準の$errorsオブジェクトがコンポーネントのビュー内で利用可能になります。このため、アプリケーションの残りの部分でバリデーションを処理するBladeインクルードのような既存のコードも同様に適用されます。

カスタムキー/メッセージのペアをエラーバッグに追加することもできます。

$this->addError('key', 'message')

動的にルールを定義する必要がある場合は、コンポーネントの$rulesプロパティをrules()メソッドで代用できます。

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

    protected function rules()
    {
        return [
            'name' => 'required|min:6',
            'email' => ['required', 'email', 'not_in:' . auth()->user()->email],
        ];
    }
}

リアルタイムバリデーション

ユーザーがフォームフィールドに入力するときに、フォームフィールドをバリデートすると便利な場合があります。Livewireでは$this-> validateOnly())メソッドを使用して、「リアルタイム」検証が簡単に行えます。

更新のたびに入力フィールドをバリデートするには、Livewireのupdatedフックを使用します。

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

    protected $rules = [
        'name' => 'required|min:6',
        'email' => 'required|email',
    ];

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

    public function saveContact()
    {
        $validatedData = $this->validate();

        Contact::create($validatedData);
    }
}
<form wire:submit.prevent="saveContact">
    <input type="text" wire:model="name">
    @error('name') <span class="error">{{ $message }}</span> @enderror

    <input type="text" wire:model="email">
    @error('email') <span class="error">{{ $message }}</span> @enderror

    <button type="submit">Save Contact</button>
</form>

この例で実際何が起こっているのか分析してみましょう。

もしかしたらあなたは、「なぜvalidateOnlyが必要なのですか?validateだけを使用することはできませんか?」と疑問に思っているでしょう。この理由は使用しない場合、あるフィールドを更新するたびにすべてのフィールドがバリデートされるためです。これは不快なユーザーエクスペリエンスになる可能性があります。フォームの最初のフィールドに1文字を入力すると、突然すべてのフィールドにバリデーションメッセージが表示されることを想像してみてください。validateOnlyはこれを防ぎ、更新している現在のフィールドのみバリデートします。

$rulesプロパティ外のルールで検証する

何らかの理由で$rulesプロパティで定義するルール以外のルールを使用して、バリデーションしたい場合は、ルールをvalidate()validateOnly()メソッドに直接渡し、いつでも検証できます。

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

    public function updated($propertyName)
    {
        $this->validateOnly($propertyName, [
            'name' => 'min:6',
            'email' => 'email',
        ]);
    }

    public function saveContact()
    {
        $validatedData = $this->validate([
            'name' => 'required|min:6',
            'email' => 'required|email',
        ]);

        Contact::create($validatedData);
    }
}

エラーメッセージと属性をカスタマイズする

Livewireコンポーネントで使用するバリデーションメッセージをカスタマイズしたい場合は、$messagesプロパティを使用してカスタマイズできます。

デフォルトのLaravelバリデーションメッセージを保持したまま、メッセージの:attribute部分だけをカスタマイズしたい場合は、$validationAttributesプロパティを使用して、カスタム属性名を指定できます。

class ContactForm extends Component
{
    public $email;

    protected $rules = [
        'email' => 'required|email',
    ];

    protected $messages = [
        'email.required' => 'The Email Address cannot be empty.',
        'email.email' => 'The Email Address format is not valid.',
    ];

    protected $validationAttributes = [
        'email' => 'email address'
    ];

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

    public function saveContact()
    {
        $validatedData = $this->validate();

        Contact::create($validatedData);
    }
}

グローバルな$rulesバリデーションプロパティを使用しない場合は、カスタムメッセージと属性をvalidate()へ直接渡せます。

class ContactForm extends Component
{
    public $email;

    public function saveContact()
    {
        $validatedData = $this->validate(
            ['email' => 'required|email'],
            [
                'email.required' => 'The :attribute cannot be empty.',
                'email.email' => 'The :attribute format is not valid.',
            ],
            ['email' => 'Email Address']
        );

        Contact::create($validatedData);
    }
}

エラーメッセージの直接操作

validate()validateOnly()メソッドで、ほとんどのケースを処理できるはずですが、Livewireの内部ErrorBagを直接制御したい場合もあるでしょう。

Livewireには、ErrorBagを直接操作するためにメソッドをいくつか用意しています。

Livewireコンポーネントクラス内のどこからでも、以下のメソッドを呼び出すことができます。

// 手早くエラーバッグに検証メッセージを追加します。
$this->addError('email', 'The email field is invalid.');

// この2つの方法はエラーバッグをクリアするという同じ動作をします。
$this->resetErrorBag();
$this->resetValidation();

// 1つのキーのエラーのみをクリアする場合は、以下を使用します。
$this->resetValidation('email');
$this->resetErrorBag('email');

// 次の方法で、エラーバッグに完全にアクセスできます。
$errors = $this->getErrorBag();

// このエラーバッグインスタンスを使用し、以下のようなことが可能です。
$errors->add('some-key', 'Some message');

バリデーションのテスト

Livewireは、バリデーションシナリオに役立つテストユーティリティを提供しています。「お問い合わせフォーム」コンポーネントの簡単なテストを書いてみましょう。

/** @test  */
public function name_and_email_fields_are_required_for_saving_a_contact()
{
    Livewire::test('contact-form')
        ->set('name', '')
        ->set('email', '')
        ->assertHasErrors(['name', 'email']);
}

これも便利ですがさらに一歩進んで、特定のバリデーションルールに対して実際にテストすることができます。

/** @test  */
public function name_and_email_fields_are_required_for_saving_a_contact()
{
    Livewire::test('contact-form')
        ->set('name', '')
        ->set('email', '')
        ->assertHasErrors([
            'name' => 'required',
            'email' => 'required',
        ]);
}

LivewireはassertHasErrorsの逆な、assertHasNoErrors()も提供します。

/** @test  */
public function name_field_is_required_for_saving_a_contact()
{
    Livewire::test('contact-form')
        ->set('name', '')
        ->set('email', 'foo')
        ->assertHasErrors(['name' => 'required'])
        ->assertHasNoErrors(['email' => 'required']);
}

これら2つのメソッドでサポートしているその他の構文例については、テストのドキュメントを参照してください。

カスタムバリデタ

Livewireで独自のバリデーションシステムを使用したい場合も問題ありません。LivewireはValidationExceptionをキャッチし、$this->validate()を使用するのと同じようにビューにエラーを提供します。

例をご覧ください。

use Illuminate\Support\Facades\Validator;

class ContactForm extends Component
{
    public $email;

    public function saveContact()
    {
        $validatedData = Validator::make(
            ['email' => $this->email],
            ['email' => 'required|email'],
            ['required' => 'The :attribute field is required'],
        )->validate();

        Contact::create($validatedData);
    }
}
<div>
    Email: <input wire:model.lazy="email">

    @if($errors->has('email'))
        <span>{{ $errors->first('email') }}</span>
    @endif

    <button wire:click="saveContact">Save Contact</button>
</div>

Note: Laravelの"FormRequest"を使用できるのかと疑問に思われるかもしれません。Livewireの性質上、httpリクエストにフックすることは意味がありません。現在のところ、この機能は使用できないか非推奨です。

ドキュメント章別ページ

ヘッダー項目移動

注目:アイコン:ページ内リンク設置(リンクがないヘッダーへの移動では、リンクがある以前のヘッダーのハッシュをURLへ付加します。

移動

クリックで即時移動します。

言語
バージョン

設定

適用ボタンクリック後に、全項目まとめて適用されます。

カラーテーマ
和文指定 Pagination
和文指定 Scaffold
Largeスクリーン表示幅
インデント
本文フォント
コードフォント
フォント適用確認

フォントの指定フィールドから、フォーカスが外れると、当ブロックの内容に反映されます。EnglishのDisplayもPreviewしてください。

フォント設定時、表示に不具合が出た場合、当サイトのクッキーを削除してください。

バックスラッシュを含むインライン\Code\Blockの例です。

以下はコードブロックの例です。

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    /**
     * ユーザに関連する電話レコードを取得
     */
    public function phone()
    {
        return $this->hasOne('App\Phone');
    }
}

設定を保存する前に、表示が乱れないか必ず確認してください。CSSによるフォントファミリー指定の知識がない場合は、フォントを変更しないほうが良いでしょう。

キーボード・ショートカット

オープン操作

PDC

ページ(章)移動の左オフキャンバスオープン

HA

ヘッダー移動モーダルオープン

MS

移動/設定の右オフキャンバスオープン

ヘッダー移動

T

最初のヘッダーへ移動

E

最後のヘッダーへ移動

NJ

次ヘッダー(H2〜H4)へ移動

BK

前ヘッダー(H2〜H4)へ移動

その他

?

このヘルプページ表示
閉じる