Scroll back to the form errors using alpineJS

Caleb the creator of AlpineJS, and Livewire. Shared a post recently, on twitter showing how to Scroll back to the error message in the form.

Making this feature, will improve Your UX, and help your users, use your websites better.

Here's the example, using laravel blade:

1@error('state.field')
2    <p class="text-sm text-red-400"
3        x-init="$el.closest('form').scrollIntoView()"> 
4        {{ $message }}
5    </p>
6@enderror

If you have errors in the bottom of the form page, you can do this:

1@error('state.field')
2    <p class="text-sm text-red-400"
3        x-init="$el.closest('form').querySelector('[aria-invalid=\'true\']').closest('label').scrollIntoView()"> 
4        {{ $message }}
5    </p>
6@enderror

PS: You can use this feature in any form, once you have alpineJs installed.