Реалтайм-валидация

Реалтайм-валидация в Livewire - это возможность проверять поля формы непосредственно во время ввода данных пользователем. Она реализуется с помощью метода validateOnly, который вызывается при обновлении свойства через директиву wire:model.live. Это позволяет мгновенно отображать ошибки под полями и делать интерфейс более отзывчивым.

Синтаксис

В классе компонента объявляются свойства, правило валидации и метод, в котором вызывается validateOnly с именем поля. В Blade-шаблоне используется директива wire:model.live для мгновенной привязки, а ошибки выводятся с помощью переменной $errors.

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class FormComponent extends Component
	{
		public $email = '';
		
		protected $rules = [
			'email' => 'required|email',
		];
		
		public function updated($field)
		{
			$this->validateOnly($field);
		}
		
		public function render()
		{
			return view('livewire.form-component');
		}
	}
?>

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

Пример

Давайте проверим поле для ввода возраста. Оно должно содержать число не меньше 18. Используем метод validateOnly в сочетании с wire:model.live для моментальной проверки:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class AgeComponent extends Component
	{
		public $age = '';
		
		protected $rules = [
			'age' => 'required|integer|min:18',
		];
		
		public function updated($field)
		{
			$this->validateOnly($field);
		}
		
		public function render()
		{
			return view('livewire.age-component');
		}
	}
?>

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

При вводе значения меньше 18, пользователь сразу увидит сообщение об ошибке.

Пример

Теперь реализуем реалтайм-валидацию для поля имени, которое должно содержать только буквы и быть не короче двух символов. Также добавим проверку пароля, который должен содержать минимум 6 символов:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class RegisterComponent extends Component
	{
		public $name = '';
		public $password = '';
		
		protected $rules = [
			'name' => 'required|alpha|min:2',
			'password' => 'required|min:6',
		];
		
		public function updated($field)
		{
			$this->validateOnly($field);
		}
		
		public function render()
		{
			return view('livewire.register-component');
		}
	}
?>

<div>
	<div>
		<input type="text" wire:model.live="name" placeholder="Имя">
		@error('name') <span>{{ $message }}</span> @enderror
	</div>
	<div>
		<input type="password" wire:model.live="password" placeholder="Пароль">
		@error('password') <span>{{ $message }}</span> @enderror
	</div>
</div>

Теперь поля name и password валидируются сразу при вводе. Это помогает пользователю быстро исправить ошибки.

Смотрите также

класс Form,
который используется для работы с формами в Livewire
метод validate,
который проверяет все поля формы
метод validateOnly,
который проверяет конкретное поле
метод reset,
который сбрасывает значения формы