Filament

Filament support builds on the same browser runtime, but gives you a package-specific plugin and field helpers so panel forms can emit client feedback before submit.

Register the panel plugin#

use Filament\Panel;
use Filament\PanelProvider;
use MrPunyapal\ClientValidation\Filament\ClientValidationPlugin;

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

validationMode('live') makes generated x-validate.live bindings the default for fields handled through the package helper.

Use the built-in field wrapper#

use MrPunyapal\ClientValidation\Filament\ClientValidatedField;

ClientValidatedField::make('email')
    ->clientValidation('required|email|unique:users,email')
    ->clientValidationMode('live');

Use ClientValidatedField when you want a drop-in field that already renders the validation wrapper view shipped with the package.

Add client validation to a custom Filament field#

use Filament\Forms\Components\Field;
use MrPunyapal\ClientValidation\Filament\HasClientValidation;

class PhoneField extends Field
{
    use HasClientValidation;
}

In the Blade view for that field, render the generated attributes on the wrapper that owns the input:

<div
    @if ($hasClientValidation())
        x-validate{{ $getClientValidationModifier() }}="{{ $getClientValidationRules() }}"
    @endif
>
    {{ $getChildComponentContainer() }}
</div>

Let Filament infer rules from the field#

If you call withClientValidation() instead of clientValidation('...'), the trait falls back to the field's existing required state and validation rules where possible.

Related pages#

• Use livewire when your Filament form also needs component-level Livewire guidance.
• Review configuration for remote-validation and class defaults.
• Keep examples nearby for quick copyable snippets.