@marcorieser I don't see needing this really, but it kinda works and it's fun to see what I can and can't do. Thanks for the link. Here's what I found.

Foo.php

class Foo extends Component
{
    #[Validate(['required', 'min:2'])]
    public $greeting = '';

    public function render(): Application|Factory|\Illuminate\Contracts\View\View|View
    {
        return view('livewire.foo');
    }
}

foo.blade.php

<div>
    <form>
        <div class="mt-2">
            <input type="text" wire:model="greeting" class="rounded-md border bg-slate-700 p-4 text-white" />
        </div>
        <div class="text-sm italic text-red-500">
            @error('greeting')
                {{ $message }}
            @enderror
        </div>
        <div class="mt-2">
            <button
                wire:click.prevent="$refresh"
                type="submit"
                class="rounded-md bg-blue-600 px-4 py-2 font-medium text-white"
            >
                Greet
            </button>
        </div>
    </form>

    @if ($greeting !== '' and ! $errors->has('greeting'))
        <div>{{ $greeting }}</div>
    @endif
</div>

The automatic validation does work as long as the button is type submit and add prevent to prevent the default submit so the page doesn't refresh.

Also, on first page load, nothing happens if you just hit submit. A request is sent to update but validation errors don't show up. If you submit an invalid value like 'a' then errors start working and after that you can hit backspace and submit nothing and the required error will show up.

So the only thing missing is the initial required error if the user loads the page and hits submit immediately without ever trying to type anything in the input.

Also, I had to add the extra check on the output because otherwise it will show a validation error for 'a' but still show the value in the view.

Binding Data