Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

texe's avatar
Level 1

How to remember form data in livewire component when validation fails?

I have a form in classic blade file and validate data in external request file. I have an "old" operator in forms and when validation fails, data I typed remains in this form and I see the error, then I can fill the form correctly and save data.

But I use a livewire component in this form, it's checkbox. If I check then the optional form will appear and I can fill this optional form. Everything works fine BUT when validation fails this checkbox is unchecked and optional form is empty (there is no 'old' directive, and I have to fill this form once again). How to leave this checkbox checked and - the more important - remember data in optional livewire form when validation fails?

Blade file (task-form.blade.php) with livewire include:

...
<div class="md:col-span-4">
        @livewire('nexttask', ['status_types' => $status_types, 'whoisnext_types' => $whoisnext_types, 'action_types' => $action_types, 'activity_types' => $activity_types])
</div>
...

This livewire (netxttask) file is:

 <div>
    
    @if($hide)
    <div class="flex items-center mb-4">
        <input id="next_task" name="next_task" wire:click="show" type="checkbox">
        <label for="next_task">Create next task</label>
    </div>
    @endif
    @if($show)
//some form and THIS FORM IS EMPTY WHEN VALIDATION FAILS
<input id="next_task" name="next_task" wire:click="hide" checked value="1" type="checkbox" value="" >
        <label for="next_task">Create next task</label>
		<x-input-label for="next_date" :value="__('Next task date')" class="mt-2"/>
        <input type="date" id="next_date" name="next_date">
        <x-input-error class="mt-2" :messages="$errors->get('next_date')" />
// next fields...
    @endif
    </div>

The livewire controller is:

class Nextavgtask extends Component
{
    public $show, $hide = true, $status_types, $action_types, $whoisnext_types, $activity_types;

    public function render()
    {
        return view('livewire.nextask');
    }

    public function show()
    {
        $this->show = true;
        $this->hide = false;
    }
    public function hide()
    {
        $this->show = false;
        $this->hide = true;
    }
}
0 likes
10 replies
tykus's avatar

How are you actually submitting the form; I suspect it is not properly using wire:submit?

texe's avatar
Level 1

You are right, I use this:

  <x-button-normal type="submit" class="block w-full">{{ __('Save') }}</x-button-normal>

because I have a classic form and within I use livewire component. So in fact it is one form (classic blade/HTML form). When you asked me I realized that here is the place when I made the mistake. I use livewire only to show and hide additional form...

tykus's avatar

@texe if you are not using Livewire, then you need to use the old helper to get the previous form input values.

<input type="date" id="next_date" name="next_date" value="{{ old('date') }}">

Mark the thread solved if you're all set 👍

texe's avatar
Level 1

@tykus It will not work because when page is reloaded (after validation) the checkbox is unchecked. Then I have to tick this checkbox and THEN the livewire form will present on this page - actually THEN it is loaded first time, so there is no "old" value.

tykus's avatar

@texe because the checkbox is outside the form, and not submitted with the rest of the form inputs, right?

TBH, I don't know why you need Livewire at all.

texe's avatar
Level 1

@tykus No, the checkbox is inside the form. I use Livewire because the additional form is not required in every case. So if I need this additional form then I click checkbox and then the additional form will appear. That's why I use Livewire. It is impossible to achieve this effect using PHP and classic Blade.

tykus's avatar

@texe can you just share the entire code?

It is impossible to achieve this effect using PHP and classic Blade.

It does not need a full post back to the server however. Did you consider AlpineJS? Or, vanilla javascript?

texe's avatar
Level 1

@tykus No I didn't. I don't want to use another technology in my app especially only for one functionality. Maybe I will try to do something in Java Script...

tykus's avatar

@texe Alpine comes with Livewire 🤷‍♂️

Anyway, if you were to use Livewire, then you would need to pass some data to the component to set an initial state for show, e.g. some boolean calculated from (i) old('next_task', false)

@livewire('nexttask', [
    'status_types' => $status_types,
    'whoisnext_types' => $whoisnext_types,
    'action_types' => $action_types,
    'activity_types' => $activity_types,
    'show' => old('next_task', false)
])

texe's avatar
Level 1

@tykus my friend! It's almost working! Now I have filled form, but after validation fails I see two checkboxes with "Create next task": one of them is unchecked and the second is checked and the form is visible, all data from this additional form is in the fields (I used "old" directive).

Please or to participate in this conversation.