Mar 17, 2024

Level 2

Close confirmation modal on validation error

I have a save form action defined for my Filament wizard like this in the EditConfiguration.php file:

protected function getSaveFormAction(): Action
    {
        return Action::make(__('Save'))
            ->requiresConfirmation()
            ->modalDescription(__('Are you sure you\'d like to save the configuration: ":configurationName"?', ['configurationName' => $this->data['name']]))
            ->action(fn() => $this->save());
    }

If the form runs into a validation error then I'm sending a notification to the end-user using the onValidationError method:

protected function onValidationError(ValidationException $exception): void
    {        
        Notification::make()
            ->title($exception->getMessage())
            ->danger()
            ->send();
    }

I would also like to close the confirmation modal in case of a validation error occurs since this would provide the best UX. Is there a simple way to accomplish that with Filament?

peterhrobar

2 years ago

Level 2

Something like this:

return Action::make(__('Save'))
       ->requiresConfirmation()
       ->modalDescription(__('Are you sure you\'d like to save the configuration: ":configurationName"?', ['configurationName' => $this->data['name']]))
       ->action(function(Action $action) {
           try {
               $this->validate();
               $this->save();
           } catch (\Exception $e) {
               (property_exists($e, 'validator')) &&
               ($e?->validator instanceof Validator) &&
                   $this->setErrorBag($e->validator->errors());
               $action->cancel();
           }
       });

You need to set the error bag if you do the validation manually ...

Sera

1 year ago

Level 1

@peterhrobar did you find a solution for this? I'm having the same issue.

liquid207

1 year ago

Level 1

I met the same issue.

KhalidCodes

1 year ago

Level 1

Just putting this here in case somebody needs it.

$this->closeActionModal();

Did the trick for me. Hope this helps.

DevotedZest

1 year ago

Level 1

I totally get why you'd want to close the confirmation modal on a validation error—it makes for a smoother user experience. In Filament, one way to handle this is by manually closing the modal using $this->dispatch('closeModal') if validation fails. You can add this inside your validation logic.

That said, if you're using Filament’s built-in form validation inside a modal, it usually keeps the modal open when validation fails. If you're handling validation manually, you might need to trigger the modal close event explicitly.

Hope that helps! Let me know if you need an example.

KhalidCodes

1 year ago

Level 1

@DevotedZest It's $this->dispatch('close-modal', id: 'modal-id-goes-here') you still need the modal id, which I wasn't able to get from my custom page. $this->closeActionModal() does the job tho.

beefsoupclover

1 year ago

Level 1

@DevotedZest, I would love an example if you have one. I couldn't get the validation to happen before the modal. I did this work around, but maybe not the cleanest way?

use Filament\Actions\Action;

protected function getHeaderActions(): array
{
    return [
        Action::make(__('test'))
            ->action(function(Action $action) {
                try {
                    $this->form->validate();
                    $this->save();
                } catch (ValidationException $e) {
                    $this->setErrorBag($e->validator->errors());

                    /* none of these work, hence the isFormValid() method below */
                    // $this->closeActionModal();
                    // $this->dispatch('closeModal');
                    // $action->cancel();
                }
            })
            ->requiresConfirmation(function() {
                return $this->isFormValid();
            })
            ->modalDescription( function() {
                return $this->isFormValid() ? 'Are you sure?' : '';
            }),
    ];
}

protected function isFormValid() 
{
    try {
        $this->form->validate();
        return true;
    } catch (ValidationException $e) {
        return false;
    }
}

1 like

orpheusohms

9 months ago

Level 1

Here is another way. I decided to show instant feedback on the input pre form validation. So with this you get instant feedback on the input.

Mix & Match


use Livewire\Component;

private function getGeneralInformationSchema(): Tabs\Tab
{
    return Tabs\Tab::make('General Information')
        ->columnSpanFull()
        ->columns(1)
        ->schema([
            Section::make()
                ->columnSpanFull()
                ->columns(1)
                ->schema([
                    TextInput::make('name')
                        ->required()
                        ->live()
                        ->maxLength(100)
                        ->afterStateUpdated(function (Component $livewire, TextInput $component) {
                            $livewire->validateOnly($component->getStatePath()); // validate field
                        })
                        ->label('Name'),

                    TextInput::make('slug')
                        ->required()
                        ->unique('workspaces', 'slug', $this->workspace)
                        ->live()
                        ->debounce(500) // debounce to prevent too many requests
                        ->afterStateUpdated(function (Component $livewire, TextInput $component) {
                            $livewire->validateOnly($component->getStatePath()); // validate field
                        })
                        ->label('Slug'),

                    Actions::make([
                        Action::make('updateWorkspace')
                            ->label('Update')
                            ->action(function () {
                                try {
                                    $this->form->validate(); // @phpstan-ignore-line 
                                    $this->updateWorkspace('general_information');
                                } catch (ValidationException $e) {
                                    $this->setErrorBag($e->validator->errors());
                                }
                            })
                            ->requiresConfirmation()
                            ->modalDescription('Are you sure you want to update this workspace information?'),
                    ])->alignEnd(),
                ])
        ])
        ->statePath('data.general_information');
}

Additionally you can also use the disabled method to disable the action if the form is invalid. That way you have instant feedback on the input.

Action::make('updateWorkspace')
    ->label('Update')
    ->action(function () {
        $this->updateWorkspace('general_information');
    })
    ->requiresConfirmation()
    ->disabled(function () {
        try {
            $this->form->validate(); // @phpstan-ignore-line
            return false;
        } catch (ValidationException $e) {
            $this->setErrorBag($e->validator->errors());
            return true;
        }
    })
    ->modalDescription('Are you sure you want to update this workspace information?'),

Please or to participate in this conversation.