mrpunyapal/client-validation-livewire

Livewire integration for Laravel Client Validation: WithClientValidation trait, snapshot hook, and magic-mode browser binding.

0.1.1 2026-08-25 20:23 UTC

Requires

• php: ^8.3
• livewire/livewire: ^3.0|^4.0
• mrpunyapal/laravel-client-validation: ^0.1.0

Requires (Dev)

• orchestra/testbench: ^10.0|^11.0
• pestphp/pest: ^3.0
• pestphp/pest-plugin-laravel: ^3.0

MIT

• Punyapal Shah

Published on Packagist.org on 2026-08-25 20:24 UTC

README

Livewire integration for Laravel Client Validation. It ships the WithClientValidation trait, the ClientValidationHook that embeds client-safe rules into the Livewire snapshot memo, and magic-mode browser binding so wire:model fields validate live without any Blade changes.

Installation

composer require mrpunyapal/client-validation-livewire

The ClientValidationHook is auto-registered by the core package's ClientValidationServiceProvider when this package is installed — no manual registration needed.

Usage

Add the WithClientValidation trait to any Livewire component:

<?php

namespace App\Livewire;

use Livewire\Component;
use MrPunyapal\ClientValidation\Livewire\WithClientValidation;

class ContactForm extends Component
{
    use WithClientValidation;

    public string $name = '';
    public string $email = '';

    protected $rules = [
        'name' => 'required|string|max:100',
        'email' => 'required|email|unique:users,email',
    ];

    public function render()
    {
        return view('livewire.contact-form');
    }
}

On component init in the browser, the hook reads snapshot.memo.clientValidation, parses only client-safe rules, and binds live validation to all wire:model fields. Server-side rules such as unique or exists are prefixed with ajax: and validated remotely through the core package's validation endpoint.

You can also access the generated rules directly from Blade:

<div x-data="{{ $this->alpineValidation }}">
    <input type="text" wire:model="name" name="name">
    <x-client-validation:error field="name" />
</div>

Testing

composer install
composer test