In a traditional HTML page containing a form, the form is only ever submitted when the user presses the “Submit” button.
However, Livewire is capable of much more than traditional form submissions. You can validate form inputs in real-time or even save the form as a user types.
In these “real-time” update scenarios, it can be helpful to signal to your users when a form or subset of a form has been changed, but hasn’t been saved to the database.
When a form contains un-saved input, that form is considered “dirty”. It only becomes “clean” when a network request has been triggered to synchronize the server state with the client-side state.
Livewire allows you to easily toggle visual elements on the page using the
wire:dirty to an element, you are instructing Livewire to only show the element when the client-side state diverges from the server-side state.
To demonstrate, here is an example of an
UpdatePost form containing a visual “Unsaved changes…” indication that signals to the user that the form contains input that has not been saved:
<form wire:submit="update"> <input type="text" wire:model="title"> <!-- ... --> <button type="submit">Update</button> <div wire:dirty>Unsaved changes...</div> <!-- [tl! highlight] --> </form>
wire:dirty has been added to the “Unsaved changes…” message, the message will be hidden by default. Livewire will automatically display the message when the user starts modifying the form inputs.
When the user submits the form, the message will disappear again, since the server / client data is back in sync.
By adding the
.remove modifier to
wire:dirty, you can instead show an element by default and only hide it when the component has “dirty” state:
<div wire:dirty.remove>The data is in-sync...</div>
Imagine you are using
wire:model.blur to update a property on the server immediately after a user leaves an input field. In this scenario, you can provide a “dirty” indication for only that property by adding
wire:target to the element that contains the
Here is an example of only showing a dirty indication when the title property has been changed:
<form wire:submit="update"> <input wire:model.blur="title"> <div wire:dirty wire:target="title">Unsaved title...</div> <!-- [tl! highlight] --> <button type="submit">Update</button> </form>
Often, instead of toggling entire elements, you may want to toggle individual CSS classes on an input when its state is “dirty”.
Below is an example where a user types into an input field and the border becomes yellow, indicating an “unsaved” state. Then, when the user tabs away from the field, the border is removed, indicating that the state has been saved on the server:
<input wire:model.blur="title" wire:dirty.class="border-yellow-500">