Filament•12mo ago

How can I validate a group of input into a wizard Step ?

Hi, I use a Wizard for the creation process of one of my resources and want to validate a group of inputs which are formatted as a code in the mutateFormDataBeforeCreate(). Is there any way to do that ? At first I thought I could just update a hidden "code" input in the form but if I validate this hidden input, the error message would be invisible I guess. I also don't want this input to appear in the form because its not relevant for the user. Help would be really appreciated 🙂

5 Replies

ChriisOP•12mo ago

Or maybe, how can I access the validation process of a Wizard step ? Because I need to validate these inputs in the first step so if there is an error and I'm in the last one ...

DrByte•12mo ago

This is an area where Filament defers to you to decide how you want to handle it. The usual advice given is to add an afterValidation closure to each step. eg: ->afterValidation(function ($state, $livewire, $component) {...}) https://filamentphp.com/docs/3.x/forms/layout/wizard#step-lifecycle-hooks ... and in that closure do something to either halt it so the user can't go on if validation has failed, and/or to persist the collected data to the database in a temporary state (maybe an "is_incomplete" flag field in the db record) until final Submission.

Wizard - Form Builder - Filament

DrByte•12mo ago

(I tried using the Wizard in a project and this very issue stumped me and I gave up on it because we decided that we didn't need so many steps after all: we reworked to collect less data anyway (other data is collected later only when needed). So we went with a non-wizard form. EDIT: BUT, I didn't get around to exploring using afterValidation ... the "buzz" is that it probably would have done the job.) That said, another thing I've found helps is ensuring that I have reactive field validation going on: making sure that field rules are checked onBlur/debounce, so that real-time validation errors are shown on each field. .... and I think if I'd been doing that in the wizard it would have saved a lot of trouble, because it would have been visually obvious that there was a problem before the person clicked to go to the next Step. Sorry for the long responses. I hope it's helpful.

ChriisOP•12mo ago

Hi, thanks for your response 🙂 I've tried the validation lifecycle hooks, and the one that could do the job for me is beforeValidation(). However, I don't really see how I can access the form data within the function. I also think it's probably not ideal to have two types of information sources for the user (notifications sent by the beforeValidation function) and usual validation errors message. Regarding reactive validation, I understand what you mean, but I have no idea how it could be done with Filament. Are there some docs I missed ? I think it would be the best solution for this problem.

DrByte•12mo ago

For reactive validation, this is what I use. It's tweaked to validate only the current field, so that validation errors aren't shown on every field in the form until the user blurs out of the field (saves time, saves db hits, saves round trips for livewire fields):

TextInput::make('project_name')
    ->label('Project Name')
    ->maxLength(150)
    ->autofocus()
    ->required()
    ->debounce(400)
    ->afterStateUpdated(function (Forms\Contracts\HasForms $livewire, Forms\Components\TextInput $component) {
        // @phpstan-ignore-next-line
        $livewire->validateOnly($component->getStatePath());
    })
    ->helperText('(Might include Organization, Building, Landmark, etc.)')

TextInput::make('project_name')
    ->label('Project Name')
    ->maxLength(150)
    ->autofocus()
    ->required()
    ->debounce(400)
    ->afterStateUpdated(function (Forms\Contracts\HasForms $livewire, Forms\Components\TextInput $component) {
        // @phpstan-ignore-next-line
        $livewire->validateOnly($component->getStatePath());
    })
    ->helperText('(Might include Organization, Building, Landmark, etc.)')

(NOTE: It's NOT set up to save wizard step data. This is only using afterStateUpdated to do validation ... so far.) The benefit here is that visually the user knows immediately that they need to fix something, as soon as they hit the debounce timer or blur out of the field into another one. IMO this may help in a Wizard to prevent any surprises on the last Step where the Submit button occurs.

Gaming

Programming

How can I validate a group of input into a wizard Step ?