Passing validation errors into Alpine

#1

First LiveWire project and I’m rebuilding an app in LW & Alpine for a client and I need to match their functionality exactly. They currently have a form that, when the button is pressed, changes state (text basically changes from Submit to Loading), which I have working fine. However, if there are any form errors, I haven’t found the proper way to pass those through. So it comes back with errors, but the button state is still ‘sending’. How can I detect the presence of errors, beyond the initial page load?

This is the simplified current setup. I stripped out classes and non-essentials.

```<div
        x-data="{ sending: false }">
        <button type="submit"
            @click="sending = true"
            :disabled="sending">
            <span x-show="!sending">Submit</span>
            <span x-show="sending">Sending...</span>
        </button>
    </div>```

I’ve tried to use x-init to pass through count($errors), but of course it’s always 0. Any help or guidance in the right direction would be great. Thanks!

#2

Do you need to do errors in Alpine? You can show the errors right in your blade view:

#3

I’m not looking to show the errors in Alpine, I’m looking for the presence of errors so I can change the state of sending to false.

#4

How are you collecting $errors?

#5

I’m just looking at the $errors array returned from Livewire, trying to get a count of those. But if there’s a better way to know the form was submitted, but not processed I’m open to it. $errors just seemed the most likely candidate as the only reason it would not be processed is due to errors.

#6

Have you been able to verify that $errors contains anything?

#7

Yes, I can get the errors back in Livewire/PHP. But Alpine doesn’t reload them. So if I set it to x-data="{ errorCount: '{{ count($errors) }}' }", errorCount is always 0

#8

Took it out and rewrote it, adding complexity as I went this am and the same logic above that wasn’t working, now is. So I’m not sure what happened, but the errorCount is now updating, which means I can use it along with sending to check the form status.

If there’s a better way to do it, I’m open to it.