Директива @error

Директива @error в Livewire предназначена для вывода сообщений об ошибках валидации, которые возникают при отправке форм или выполнении действий. Она работает аналогично одноименной директиве из стандартного Blade, но интегрирована с механизмом валидации Livewire. В качестве аргумента директива принимает имя проверяемого поля.

Синтаксис

@error('fieldName')
	<span>{{ $message }}</span>
@enderror

Пример

Давайте создадим форму с полем ввода имени и кнопкой отправки. В компоненте добавим правило валидации, требующее, чтобы поле имени было обязательным. При возникновении ошибки директива @error выведет соответствующее сообщение:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use LivewireAttributesRule;
	
	class UserForm extends Component
	{
		public $name = '';
		
		#[Rule('required', message: 'The name field is required.')]
		public function save()
		{
			$this->validate();
			
			// ... saving logic
		}
		
		public function render()
		{
			return view('livewire.user-form');
		}
	}
?>

<form wire:submit="save">
	<div>
		<input type="text" wire:model="name" placeholder="Enter name">
		@error('name')
			<span style="color: red;">{{ $message }}</span>
		@enderror
	</div>
	<button type="submit">Save</button>
</form>

Результат выполнения кода (при пустом поле и отправке):

<form>
	<div>
		<input type="text" placeholder="Enter name">
		<span style="color: red;">The name field is required.</span>
	</div>
	<button type="submit">Save</button>
</form>

Пример

В этом примере мы покажем, как использовать директиву @error для отображения ошибок валидации сразу нескольких полей формы. Добавим дополнительное поле email с соответствующим правилом:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use LivewireAttributesRule;
	
	class ContactForm extends Component
	{
		public $email = '';
		public $message = '';
		
		#[Rule('required|email', message: 'Please enter a valid email.')]
		public function submit()
		{
			$this->validate();
			
			// ... sending logic
		}
		
		public function render()
		{
			return view('livewire.contact-form');
		}
	}
?>

<form wire:submit="submit">
	<div>
		<input type="email" wire:model="email" placeholder="Email">
		@error('email')
			<span style="color: red;">{{ $message }}</span>
		@enderror
	</div>
	<div>
		<textarea wire:model="message" placeholder="Message"></textarea>
		@error('message')
			<span style="color: red;">{{ $message }}</span>
		@enderror
	</div>
	<button type="submit">Send</button>
</form>

Результат выполнения кода (при неверном email и пустом сообщении):

<form>
	<div>
		<input type="email" placeholder="Email">
		<span style="color: red;">Please enter a valid email.</span>
	</div>
	<div>
		<textarea placeholder="Message"></textarea>
		<span style="color: red;">The message field is required.</span>
	</div>
	<button type="submit">Send</button>
</form>

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

директиву @this,
которая дает доступ к экземпляру компонента из JavaScript
директиву @script,
которая позволяет выполнять JavaScript код в контексте компонента
директиву @assets,
которая подключает ресурсы Livewire (стили и скрипты)
директиву @entangle,
которая синхронизирует данные между Livewire и Alpine.js