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

catalyph's avatar

Livewire form Validation

Not sure if im doing this correctly.

<form method="POST" action='/entry'>
                @CSRF
                {{-- https://getdatepicker.com/6/ --}}
                <div class="row g-3">
                    <div class="col">
                        <x-formfield label="Start Date" name="start_time" type="date" value="<?php echo date('Y-m-d'); ?>" bag="entry" required></x-formfield>
                    </div>
                    @error('start_time', 'entry' )<p class='text-danger font-size-base:.5rem fw-semibold px-2'>
                        <small>{{ $message }}</small>
                    </p> @enderror
</div>
</form>

I created a a laravel app that is validating a form in the controller

    request()->validateWithBag('entry',[
        'start_time' =>['required','date_format:Y-m-d']
              
        ]);

This worked great and would return error messages to my blade view using example:

 @error('start_time', 'entry' )<p class='text-danger font-size-base:.5rem fw-semibold px-2'>
                        <small>{{ $message }}</small>
                    </p> @enderror

Now I got interested in LiveWire and decided to make the form fields into a livewire component

<form method="POST" action='/entry'>
                @CSRF
                {{-- https://getdatepicker.com/6/ --}}
                <livewire:createtime />
              
                <div class="mb-3"></div>
                <div class="d-grid col-6 mx-auto">
                    <button class="w-100 mb-2 btn btn-lg rounded-3 btn-primary mx-auto" 
type="submit">Submit</button>
                </div>
            </form>

SO only the fields are a livewire component because I want them to be dynamic and the user can add more fields The issue is when i Click submit the Controller receives the request data (i can see it with a dd(request()); at the controller, but the @error directive never displays the error anymore.

Is this because it is a livewire component? do I need to do something to pass the error directive data to the LiveWire form fields?

0 likes
5 replies
aleahy's avatar

Generally when you're working with Livewire, you do all the processing of the form within the livewire component. So Livewire sends the form data back to itself and you do the validation there. Livewire is all set up to handle its own validation error bags, etc.

There's lots of examples on the docs and you still do similar things to what you would have done in the controller, but now it's in the context of this component.

If you use controllers at all, it would be to just get the containing view to initially display the livewire component. The component dpes the rest.

1 like
catalyph's avatar

@aleahy is it possible for this to happen in the controller? or not worth the work? and should use the livewire component. I put time into learning the controller and validation and DB create in laravel and have not learned fully the livewire portion

aleahy's avatar

@catalyph The problem - as you found is, that when come back to the page from the controller with errors on the session, it will not be loaded into livewire because that is not how livewire works. Livewire works by small ajax requests in the background where information is injected. A controller works by loading the page from scratch. It's a brand new fresh load of the page. Your livewire component will also be fresh. The validation data is stored on the session. Your livewire component is completely encapsulated. You could get the data in there. But it would be a lot of painful work.

If you were using livewire for the form, all of this work is done for you. Everytime you make a change to one of the variables in your livewire component, you're sending data back to the server in an ajax request. Submitting forms is pretty much what Livewire was built for.

It's still the same work that you do in the controller, just slightly differently. You still define your validation with exactly the same rules you would use in a controller, and perform the same action. But you wire up your submit form action to a submit method in your livewire component. Your wire up the components that store the data to public properties on the livewire class. These You define a rules method and define your validation there. In the submit method you call $this->validate instead of validating the request. It returns the errors if there are any.

Something like this:

(please excuse the comments if they're stating stuff you already know)

livewire/create-time.blade.php (I've taken out all the formatting for clarity)

<form wire:submit="submit"> <!-- This connects the submit action of the form to the submit method in the component -->
       <x-formfield label="Start Date" name="start_time" type="date" wire:model="start_time" required></x-formfield><!-- The wire:model connects the $start_time variable to the value of this component -->
      <!-- Whatever else you have your livewire component do -->
      <button type="submit">Submit</button>
      @error('start_time')
         <p>{{ $message }}</p>
      @enderror
</form>

CreateTime.php

<?php
 
namespace App\Livewire\Forms;

use Livewire\Form;
 
class CreateTime extends Form
{
    public $start_time = '';
 
    public function rules()
    {
        return [
            'start_time' =>['required','date_format:Y-m-d']
        ];
    }
    public function submit() 
    {
        $this->validate(); // This uses your validation rules to validate the public properties 
 
        // Do action for saving here. Redirect to where you need to go, just like from a controller.
    }

    public function render()
    {
        return view('livewire.create-time');
    }
}

This is all shown in https://livewire.laravel.com/docs/forms

You'll find the docs say you could also define your rules in an Attribute. I just prefer the rules method (mentioned further down).

Blade is great if you just have a simple form that doesn't do anything interesting while you're filling it in. As soon as you want to make it interesting, you end up needing some sort of front end framework like Livewire or Inertia/Vue, etc. It's worth learning how to use them properly.

catalyph's avatar

@aleahy Amazing, this is the break down I needed to help understand! you are amazing!

2 likes

Please or to participate in this conversation.