Laravel Livewire Events and Form Validation

This is second tutorial of Laravel Livewire series.

You may view first tutorial here .

Events

Events are actions that happen in the system mainly due to user interaction such as by pressing a button. However some events such as page load are system generated.

Livewire events are mainly used for component communication living in the same page. For example when a new “to-do” is created by create-todo-component it may generate a “to-do-created” event. “display-to-do-list” may subscribe to this event, thus allowing it to update its to-do list. Event based communication is managed by live wire through a global bus system.

The most common way of generating an event from within a livewire component is by using emit method.

$this->emit('to-do-created',$toDoObject);

Here ‘to-do-created’ is event name and $toDoObject is parameter being passed to event-listener.

Any component that wants to receive this event may use $listeners property for the purpose.

protected $listeners = ['to-do-created' => 'handleToDoEvent'];

Here handleToDoEvent is a method that gets called when an event ‘to-do-created’ is generated. Its signature should be to accept $toDoObject payload.

public function handleToDoEvent($toDoObject){
}

Let us see how it works.

We are creating two Livewire components : Sender and Receiver. Sender is responsible for generating ‘timestamp-event’ when button is clicked and Receiver component has subscribed to ‘timestamp-event’. Thus when event is generated by Sender, UI of Receiver component is updated.

Laravel Livewire event handling example

Here is Sender Comonent

And this is it’s associated view

This is Receiver Component

And it’s associated view

Let us see how it works

In Sender component, button click causes ‘timestamp-event’ to be generated

 $this->emit('timestamp-event', 'Timestamp is '.date('h:i:s'));

In Receiver component, we have

protected $listeners = ['timestamp-event' => 'timeStampEventListener'];
    public function timeStampEventListener($timeStamp)
    {
        $this->message=" Received ".'timestamp-event'.' event ';
        $this->timeStamp=$timeStamp;
    }

$listeners propertysimply says that when ‘timestamp-event' is generated, execute timeStampEventListener($timeStamp) method. This method causes $message and $timeStamp property to be updated which causes UI to be updated.

That’s It.

Form Validation

Validation is a process to determine if data submitted by a user is in acceptable range, type and format. Form validation in livewire is super crispy. All that we have to do is

1. use $rules property to set validation rule
2. use validate() method to perform validation

If validation fails If validation fails, $errors object is populated with validation errors. We can use @error directive within the view component to display error messages associated with a given property. for example following snippet display error message associated with property ‘n2’

@error('n2')
{{ $message }}
@enderror

Lets see how it works. We have created a Calculator component used to perform multiply operation on input as shown:

Laravel Livewire Form Validation example

We have a Livewire Calculator component as follows

And its associated view

In Component class we have set validation rules for properties n1 and n2

protected $rules = [
        'n1' => 'required|numeric|min:1',
        'n2' => 'required|numeric|min:1',
    ];

Button click performs calculations after calling validate method.

public function multiply()
    {
        $this->validate();
        $this->result = $this->n1 *$this->n2;
    }

If validation fails, no calculations are performed. rather UI is updated to display error message as in:

@error('n1')
            {{ $message }}
@enderror

That’s it.

You may download source code from this repo.

Happy Coding.