Проверка при вводе в Livewire

Давайте посмотрим на форму, где ошибка заголовка видна только после нажатия кнопки, а хочется увидеть её сразу, как только поле опустело или осталось слишком коротким.

Связь wire:model.live отправляет значение на сервер при каждом изменении. Метод updatedTitle срабатывает после обновления свойства и может прогнать проверку только для заголовка.

Давайте создадим компонент PostLive:

php artisan make:livewire PostLive --class

Давайте добавим маршрут и страницу:

<?php
	Route::get('/posts/live', function () {
		return view('posts-live');
	});
?>

<x-layout>
	<livewire:post-live />
</x-layout>

Давайте опишем свойство и реакцию на его смену:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class PostLive extends Component
	{
		public $title = '';
		
		public function updatedTitle()
		{
			$this->validateOnly('title', [
				'title' => 'required',
			]);
		}
		
		public function render()
		{
			return view('livewire.post-live');
		}
	}
?>

Давайте свяжем поле с live и выведем ошибку:

<div>
	<input
		type="text"
		wire:model.live="title"
	>
	@error('title')
		<div>{{ $message }}</div>
	@enderror
</div>

Создайте компонент EmployeeLive. Ошибка имени появляется по мере ввода, без отдельной кнопки.