[V2/V3] How to share Livewire validation with AlpineJs

[hans-lts]

In the last year or so I've really embraced (and have been loving) the relationship between AlpineJs and Livewire. The only thing I felt was missing was a clean interface between the Livewire's validation results and my Alpine components. I didn't want to rely on blade directives since that would occasionally cause some DOM diffing issues and, for me at least, it just felt "cleaner".

Anyway, I made a package for it which you can check out here.

My hope is that someone out there can find a use for this - enjoy!

Quick example (Livewire v3)

Install

npm install wire-validation

Bundle

import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
import ValidationErrors from 'wire-validation';

Alpine.plugin(ValidationErrors);
 
Livewire.start()

Updated to meet v3 docs

Livewire component

class ValidationExample extends Component
{
    #[Validate('required')]
    public $name;

    public function save()
    {
        $this->validate();
    }
}

Blade

<div id="my-livewire-component" x-data x-wire-errors >
    <label>
        <span>Name</span>
        <input type="text" wire:model.live="name" />
    </label>

    <!-- Show the error message if there is one -->
    <p x-text="firstErrorFor('name')" class="error-text"></p>

    <button type="button" x-bind:disabled="hasErrors()" wire:click="save">Update</button>
</div>

Result

[ekwoka]

With LiveWire 3, you should not be separately including Alpinejs.

It is recommended you upgrade to Livewire v3 and see if the problem persists.

[hans-lts]

Thanks for pointing that out - I updated the example to match what I found in the docs: https://livewire.laravel.com/docs/installation#manually-bundling-livewire-and-alpine

It is recommended you upgrade to Livewire v3 and see if the problem persists.

Just for clarity, there's no problem or troubleshooting here - I'm just showing something I made that I though others might like

[rpapp]

Hello, this is a great package and I'm currently trying this out in my project. I do have a question, I'm using this in my modal (laravel/breeze modal) which is in livewire component. How can I call the resetValidation or clear the error bag in this when I click on cancel or close button in the modal? I do apologize if I asked on the wrong thread.

[hans-lts]

Glad you're enjoying it!

I don't know all the details of your project but you might be able to call the Livewire component's function for resetting validation state

Docs:
https://livewire.laravel.com/docs/validation#manually-controlling-validation-errors
https://livewire.laravel.com/docs/javascript#the-wire-object

Something like

<button @click=$wire.call('resetValidation')>
     Close Modal
</button>

If you're still having trouble feel free to open an issue on the package repo :)

[KhairulAzmi21]

@hans-lts . have you found the solution ?

[hans-lts]

I believe so! Please let me know if you're having any trouble still.