Laravel blade @error


The @error directive in Laravel Blade is used to display validation error messages for specific form fields. It provides an easy way to show feedback to users when their input does not meet validation criteria set by your Laravel application.

How @error Works

When handling form submissions in Laravel, you often validate user input using Laravel’s validation rules. If validation fails, Laravel redirects back to the previous page with the validation errors stored in the session. The @error directive allows you to display these errors for specific fields in your Blade templates.

Basic Usage

The @error directive is used within Blade templates to check for errors related to a specific form field and display an error message if one exists.

Example:

<form method="POST" action="/submit"> @csrf <label for="email">Email:</label> <input type="email" name="email" id="email" value="{{ old('email') }}"> @error('email') <div class="error">{{ $message }}</div> @enderror <button type="submit">Submit</button> </form>

In this example:

  • @error('email'): Checks if there is a validation error for the email field.
  • $message: Contains the error message for the email field, which is displayed inside the <div class="error"> element.

Displaying Errors for Multiple Fields

You can use the @error directive for each field in your form to handle multiple validation errors.

Example:

<form method="POST" action="/submit"> @csrf <label for="name">Name:</label> <input type="text" name="name" id="name" value="{{ old('name') }}"> @error('name') <div class="error">{{ $message }}</div> @enderror <label for="email">Email:</label> <input type="email" name="email" id="email" value="{{ old('email') }}"> @error('email') <div class="error">{{ $message }}</div> @enderror <button type="submit">Submit</button> </form>

Using @error with Custom Attributes

If you want to customize the appearance of error messages or include additional information, you can use custom attributes and styling.

Example:

@error('email') <div class="alert alert-danger"> <strong>Error:</strong> {{ $message }} </div> @enderror

In this example, the error message is styled with a Bootstrap alert class.

Handling Multiple Errors for the Same Field

The @error directive handles a single error message per field. If there are multiple validation rules for a field, Laravel will typically display only the first error message associated with that field.

Accessing Old Input Values

To improve user experience, it’s common to repopulate form fields with old input values when validation fails.

Example:

<input type="text" name="name" value="{{ old('name') }}">

Using {{ old('name') }} ensures that the user’s previous input is preserved, making it easier for them to correct errors without re-entering all the data.

Summary

The @error directive in Laravel Blade provides a straightforward way to display validation error messages for specific form fields. It simplifies the process of showing error feedback to users by automatically retrieving and displaying error messages related to form validation. By using @error, you can enhance the usability and user experience of your application’s forms.