Showing a success message after form validation and before submission

Hi guys, consider this field:

Forms\Components\TextInput::make('name')
                    ->required()
                    ->maxLength(255)
                    ->helperText(new HtmlString("The name you choose here will be the name used to set up your repository, e.g. https://github.com/company/<strong>name</strong>.git."))
                    ->default(function($state, $livewire) {
                        return RepositoryService::createDefaultRepositoryName($livewire->ownerRecord->name);
                    } )
                    ->live()
                    ->unique(ignoreRecord: true)
                    ->rules([
                        fn (Get $get): Closure => function (string $attribute, $value, Closure $fail) use ($get) {
                            if ($get('type') === 'github' && GithubService::create()->repoExists($value)) {
                                $fail("This repository already exists!");
                            }
                        }
                        ])
                    ->afterStateUpdated(function (Forms\Contracts\HasForms $livewire, Forms\Components\TextInput $component) {
                        $livewire->validateOnly($component->getStatePath());
                    })

Forms\Components\TextInput::make('name')
                    ->required()
                    ->maxLength(255)
                    ->helperText(new HtmlString("The name you choose here will be the name used to set up your repository, e.g. https://github.com/company/<strong>name</strong>.git."))
                    ->default(function($state, $livewire) {
                        return RepositoryService::createDefaultRepositoryName($livewire->ownerRecord->name);
                    } )
                    ->live()
                    ->unique(ignoreRecord: true)
                    ->rules([
                        fn (Get $get): Closure => function (string $attribute, $value, Closure $fail) use ($get) {
                            if ($get('type') === 'github' && GithubService::create()->repoExists($value)) {
                                $fail("This repository already exists!");
                            }
                        }
                        ])
                    ->afterStateUpdated(function (Forms\Contracts\HasForms $livewire, Forms\Components\TextInput $component) {
                        $livewire->validateOnly($component->getStatePath());
                    })

This succesfully shows an error message if the repository already exists, but I'd also like to show a green message if the repo name is ok! Also, bonus points if someone knows how to add some sort of spinner to the form while it's off doing its validation...

3 Replies

DrByte•14mo ago

add some sort of spinner to the form while it's off doing its validation

peek at https://filamentphp.com/docs/3.x/support/blade-components/loading-indicator

Loading indicator Blade component - Core Concepts - Filament

DrByte•14mo ago

As for displaying a green status message, perhaps you could inject it into the beginning of the helperText() upon success? Here's a way that awcodes did some status messaging into the helperText: https://gist.github.com/awcodes/9784de531aea8e3bdba772a55958a999 I wonder if that gives some inspiration for your inquiry.

Gist

Meta component

Meta component. GitHub Gist: instantly share code, notes, and snippets.

Malcolm TurntbullOP•14mo ago

Thanks for the feedback, that's a great place for me to start - will have a look into it shortly!

Gaming

Programming

Showing a success message after form validation and before submission