Filament: Validate One Form Field "Live" Before Submit

In forms, sometimes you might want to validate only one field immediately after it is updated before the complete form submit. For example, when we have File upload field to upload images with specific maximum dimensions, it would be great to validate it right away. Let's see how to do that in Filament using the afterStateUpdated() method.

validating one field live


The initial File upload field would look like this:

use Filament\Forms;
use Illuminate\Validation\Rule;
 
Forms\Components\FileUpload::make('featured_image')
->image()
->rules(Rule::dimensions()->maxWidth(600)->maxHeight(800)),

We need to call the validateOnly Livewire method inside the afterStateUpdated to validate this field.

use Filament\Forms;
use Illuminate\Validation\Rule;
 
Forms\Components\FileUpload::make('featured_image')
->image()
->rules(Rule::dimensions()->maxWidth(600)->maxHeight(800))
->afterStateUpdated(function (Forms\Contracts\HasForms $livewire, Forms\Components\FileUpload $component) {
$livewire->validateOnly($component->getStatePath());
}),

As you can see, I am type-hinting the $livewire and $component variables. For the $livewire, the type hint shouldn't change if you do this for the form. But for the $component, it may depend on which field you're working with.

For example, if you would want to live-validate a text input, the type-hint would be TextInput $component:

Forms\Components\TextInput::make('title')
->minValue(2)
->required()
->live()
->afterStateUpdated(function (Forms\Contracts\HasForms $livewire, Forms\Components\TextInput $component) {
$livewire->validateOnly($component->getStatePath());
}),

live validating text input

As you can see above, for TextInput, I also use the live() method. It is crucial for other fields than FileUpload. The field won't be updated instantly if you don't add that ->live().


If you want more Filament examples, you can find more real-life projects on our FilamentExamples.com.

avatar

Very useful. Thank you. It is working for me, but it shows an error in VS Code while coding Undefined method 'validateOnly' in red colour. Anyway it is working, but I would like not to have files showing "errors" in red in my code.

Of course I added the use Illuminate\Validation\Rule;

Any possible idea?

👍 1
avatar

Great article! Thank you!

Why is method maxItems not reactive? The new item limit is not updated in the select, according to the value placed in the input dynamically.

TextInput::make('max_items_input')->live(onBlur: true),

Select::make('technologies')
    ->multiple()
    ->options([
    'tailwind' => 'Tailwind CSS',
    'alpine' => 'Alpine.js',
    'laravel' => 'Laravel',
    'livewire' => 'Laravel Livewire',
])
// It doesn't work.
->maxItems(fn (Get $get): int => $get('max_items_input') ?? 1) 
// It works.
->helperText(fn (Get $get): string => $get('max_items_input') ?? 1) 

Like our articles?

Become a Premium Member for $129/year or $29/month
What else you will get:
  • 59 courses (1057 lessons, total 42 h 44 min)
  • 80 long-form tutorials (one new every week)
  • access to project repositories
  • access to private Discord

Recent Premium Tutorials