name	laravel-client-validation-development
description	Build Laravel forms with laravel-client-validation using Blade directives, Alpine.js, Livewire, Filament, and remote validation.

Laravel Client Validation Development

When to use this skill

Use this skill when a Laravel application uses mrpunyapal/laravel-client-validation and you need to add, debug, or refactor browser-side validation with the package.

Typical cases:

Adding x-validate or Blade validation directives to Blade or Alpine forms.
Reusing Laravel FormRequest rules in the browser.
Wiring x-wire-validate or WithClientValidation in Livewire components.
Enabling client validation in Filament panels or custom fields.
Debugging remote rules such as unique or exists.

Install and bootstrap

Install the package in the Laravel app and publish its assets:

composer require mrpunyapal/laravel-client-validation
php artisan client-validation:install

Render the assets once in the main Blade layout before using any directives:

<head>
    @clientValidationAssets
</head>

If the Laravel app already uses Boost, run one of these commands so Boost can discover or refresh third-party skills from installed packages:

php artisan boost:install
php artisan boost:update --discover

Core conventions

Keep Laravel validation rules as the source of truth. Reuse existing FormRequest, controller, or Livewire rules instead of hand-maintaining a second JavaScript rule set.
Use @rules, @validateBlur, @validateLive, or @validateSubmit for Blade forms that rely on data attributes.
Use x-validate for Alpine or Blade-first forms.
Use x-wire-validate alongside wire:model in Livewire components.
Use WithClientValidation when a Livewire component already defines rules, messages, or validationAttributes and those should be exposed to the browser.
Use ClientValidationPlugin, ClientValidatedField, or HasClientValidation for Filament integration.
Remote rules such as unique, exists, password, current_password, and encoding still rely on Laravel over AJAX and are not purely client-side.
Prefer changes in config/client-validation.php over scattered inline overrides for debounce, styling, or route behavior.
Render the package asset bundle once. Avoid duplicating @clientValidationAssets or manual script tags on the same page.

Common patterns

Reuse a FormRequest in Blade

use MrPunyapal\ClientValidation\Facades\ClientValidation;

public function create()
{
    $validation = ClientValidation::fromRequest(CreateUserRequest::class);

    return view('users.create', compact('validation'));
}

<div x-data="validation(@js($validation))">
    <input x-model="form.email" @blur="validate('email')">
    <span x-text="error('email')" x-show="hasError('email')"></span>
</div>

Add field directives directly in Blade

<form data-validate>
    <input name="email" @validateBlur('email', 'required|email')>
    <input name="username" @validateLive('username', 'required|alpha_dash|min:3')>
    <input name="password" @validateSubmit('password', 'required|min:8|confirmed')>
</form>

Livewire component integration

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

class CreateUser extends Component
{
    use WithClientValidation;

    protected $rules = [
        'email' => 'required|email',
        'password' => 'required|min:8|confirmed',
    ];
}

<div x-data="{ clientRules: @json($this->getClientRules()) }">
    <input wire:model="email" x-wire-validate="clientRules.email" name="email">
</div>

Filament panel setup

use MrPunyapal\ClientValidation\Filament\ClientValidationPlugin;

public function panel(Panel $panel): Panel
{
    return $panel->plugins([
        ClientValidationPlugin::make()->validationMode('live'),
    ]);
}

Remote validation notes

The default AJAX endpoint is /client-validation/validate.
Remote validation depends on enable_ajax_validation being enabled.
Prefer .live or input mode when users need earlier feedback for unique or exists rules.
If remote validation fails, debug the Laravel route, middleware, CSRF, and published assets before rewriting the validation rules.

What to avoid

Do not replace authoritative server-side Laravel validation with client-only validation.
Do not assume every Laravel rule runs entirely in the browser.
Do not hardcode asset paths when @clientValidationAssets already handles the normal bootstrap path.
Do not duplicate the same rules in Blade, JavaScript, controllers, and Livewire unless there is a clear reason.

name	laravel-client-validation-development
description	Build Laravel forms with laravel-client-validation using Blade directives, Alpine.js, Livewire, Filament, and remote validation.

Laravel Client Validation Development

When to use this skill

Use this skill when a Laravel application uses mrpunyapal/laravel-client-validation and you need to add, debug, or refactor browser-side validation with the package.

Typical cases:

Adding x-validate or Blade validation directives to Blade or Alpine forms.
Reusing Laravel FormRequest rules in the browser.
Wiring x-wire-validate or WithClientValidation in Livewire components.
Enabling client validation in Filament panels or custom fields.
Debugging remote rules such as unique or exists.

Install and bootstrap

Install the package in the Laravel app and publish its assets:

composer require mrpunyapal/laravel-client-validation
php artisan client-validation:install

Render the assets once in the main Blade layout before using any directives:

<head>
    @clientValidationAssets
</head>

If the Laravel app already uses Boost, run one of these commands so Boost can discover or refresh third-party skills from installed packages:

php artisan boost:install
php artisan boost:update --discover

Core conventions

Keep Laravel validation rules as the source of truth. Reuse existing FormRequest, controller, or Livewire rules instead of hand-maintaining a second JavaScript rule set.
Use @rules, @validateBlur, @validateLive, or @validateSubmit for Blade forms that rely on data attributes.
Use x-validate for Alpine or Blade-first forms.
Use x-wire-validate alongside wire:model in Livewire components.
Use WithClientValidation when a Livewire component already defines rules, messages, or validationAttributes and those should be exposed to the browser.
Use ClientValidationPlugin, ClientValidatedField, or HasClientValidation for Filament integration.
Remote rules such as unique, exists, password, current_password, and encoding still rely on Laravel over AJAX and are not purely client-side.
Prefer changes in config/client-validation.php over scattered inline overrides for debounce, styling, or route behavior.
Render the package asset bundle once. Avoid duplicating @clientValidationAssets or manual script tags on the same page.

Common patterns

Reuse a FormRequest in Blade

use MrPunyapal\ClientValidation\Facades\ClientValidation;

public function create()
{
    $validation = ClientValidation::fromRequest(CreateUserRequest::class);

    return view('users.create', compact('validation'));
}

<div x-data="validation(@js($validation))">
    <input x-model="form.email" @blur="validate('email')">
    <span x-text="error('email')" x-show="hasError('email')"></span>
</div>

Add field directives directly in Blade

<form data-validate>
    <input name="email" @validateBlur('email', 'required|email')>
    <input name="username" @validateLive('username', 'required|alpha_dash|min:3')>
    <input name="password" @validateSubmit('password', 'required|min:8|confirmed')>
</form>

Livewire component integration

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

class CreateUser extends Component
{
    use WithClientValidation;

    protected $rules = [
        'email' => 'required|email',
        'password' => 'required|min:8|confirmed',
    ];
}

<div x-data="{ clientRules: @json($this->getClientRules()) }">
    <input wire:model="email" x-wire-validate="clientRules.email" name="email">
</div>

Filament panel setup

use MrPunyapal\ClientValidation\Filament\ClientValidationPlugin;

public function panel(Panel $panel): Panel
{
    return $panel->plugins([
        ClientValidationPlugin::make()->validationMode('live'),
    ]);
}

Remote validation notes

The default AJAX endpoint is /client-validation/validate.
Remote validation depends on enable_ajax_validation being enabled.
Prefer .live or input mode when users need earlier feedback for unique or exists rules.
If remote validation fails, debug the Laravel route, middleware, CSRF, and published assets before rewriting the validation rules.

What to avoid

Do not replace authoritative server-side Laravel validation with client-only validation.
Do not assume every Laravel rule runs entirely in the browser.
Do not hardcode asset paths when @clientValidationAssets already handles the normal bootstrap path.
Do not duplicate the same rules in Blade, JavaScript, controllers, and Livewire unless there is a clear reason.

laravel-client-validation-development

Laravel Client Validation Development

When to use this skill

Install and bootstrap

Core conventions

Common patterns

Reuse a FormRequest in Blade

Add field directives directly in Blade

Livewire component integration

Filament panel setup

Remote validation notes

What to avoid

Laravel Client Validation Development

When to use this skill

Install and bootstrap

Core conventions

Common patterns

Reuse a FormRequest in Blade

Add field directives directly in Blade

Livewire component integration

Filament panel setup

Remote validation notes

What to avoid