Displaying validation errors in Laravel - Mini Project: Build & Apply

Displaying validation errors in Laravel

📖 Scenario: You are building a simple Laravel form where users can submit their email address. You want to make sure the email is valid and show clear error messages if it is not.

🎯 Goal: Create a Laravel form that validates the email input and displays validation errors below the input field.

📋 What You'll Learn

Create a route and controller method to handle the form submission

Validate the email input using Laravel's validation

Display validation errors below the email input field in the Blade template

Use Laravel's built-in error bag and @error directive

💡 Why This Matters

🌍 Real World

Forms are everywhere on websites. Validating user input and showing clear errors improves user experience and data quality.

💼 Career

Laravel developers often build forms that require validation and error display. This skill is essential for backend and full-stack web development jobs.

1

Set up the form route and controller method

Create a route in routes/web.php named email.submit that uses EmailController and its submit method.

Laravel

// Your code here

Hint

Use Route::post with the URL '/submit-email' and specify the controller and method as an array.

2

Add email validation in the controller

In EmailController, create the submit method that validates the request input email as required and must be a valid email.

Laravel

public function submit(Request $request)
{
    // Your code here
}

Hint

Use $request->validate() with an array specifying 'email' => 'required|email'.

3

Create the Blade form with email input

Create a Blade template with a form that posts to route email.submit. Add an input of type email with name email and a submit button.

Laravel

    @csrf
    

Hint

Use @csrf for security and set the form's method to POST with the correct action.

4

Display validation errors below the email input

Below the email input, use Laravel's @error('email') directive to show the error message inside a <div> with id="email-error" and role="alert" for accessibility.

Laravel

    @csrf
    Email:
    
    
    Submit

Hint

Use @error('email') and inside it a <div> with id="email-error" and role="alert" to show the error message.

Practice

1. What does $errors->any() check in a Laravel Blade view?

easy

A. If the form has been submitted

B. If the database connection is active

C. If the user is authenticated

D. If there are any validation errors present

Solution

1. Step 1: Understand the purpose of $errors

   In Laravel, $errors holds validation error messages after form submission.

2. Step 2: Role of $errors->any()

   This method returns true if there is at least one validation error, otherwise false.

3. Final Answer:

   If there are any validation errors present -> Option D

4. Quick Check:

   $errors->any() checks for errors [OK]

Hint: Remember: $errors->any() means errors exist [OK]

Common Mistakes:

• Confusing $errors->any() with form submission status
• Thinking it checks user login status
• Assuming it checks database connection

2. Which Blade syntax correctly displays all validation errors as a list?

easy

A. @if($errors->any())@foreach($errors->all() as $error){{ $error }}@endforeach@endif

B. @if($errors->all())@foreach($errors->any() as $error){{ $error }}@endforeach@endif

C. @foreach($errors->any() as $error){{ $error }}@endforeach

D. @if($errors->any()){{ $errors->all() }}@endif

Solution

1. Step 1: Check condition for errors

   Use $errors->any() to confirm if errors exist before displaying.

2. Step 2: Loop through all errors

   Use $errors->all() inside a @foreach to list each error in <li>.

3. Final Answer:

   @if($errors->any())<ul>@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>@endif -> Option A

4. Quick Check:

   Use $errors->any() + $errors->all() [OK]

Hint: Use $errors->any() before looping $errors->all() [OK]

Common Mistakes:

• Swapping $errors->any() and $errors->all() in loops
• Not checking if errors exist before looping
• Displaying errors without list tags

3. Given this Blade snippet:

@if($errors->any())
  

    

      @foreach($errors->all() as $error)
        
{{ $error }}
      @endforeach
    
  
@endif

What will be displayed if the form has two errors: "Name is required" and "Email is invalid"?

medium

A. No output because errors are not checked

B. Name is requiredEmail is invalid

C. Name is requiredEmail is invalid

D. Name is required Email is invalid

Solution

1. Step 1: Check if errors exist

   The @if($errors->any()) condition is true because there are two errors.

2. Step 2: Render errors inside alert div

   The errors are listed inside <ul> with each error in <li>, wrapped by <div class="alert">.

3. Final Answer:

   <div class="alert"><ul><li>Name is required</li><li>Email is invalid</li></ul></div> -> Option B

4. Quick Check:

   Errors listed inside alert div [OK]

Hint: Errors show inside alert div as list items [OK]

Common Mistakes:

• Forgetting the alert div wrapper
• Not using <ul> and <li> tags
• Assuming errors print as plain text without HTML

4. Identify the error in this Blade code for showing validation errors:

@if($errors->all())
  

    @foreach($errors->any() as $error)
      
{{ $error }}
    @endforeach
  
@endif

medium

A. $errors->any() returns boolean, cannot be looped

B. $errors->all() should be $errors->any() in the if

C. Missing @endif tag

D. The @foreach syntax is correct

Solution

1. Step 1: Analyze @if($errors->all()) condition

   $errors->all() returns an array, so it can be truthy if errors exist, this is acceptable but less common than $errors->any().

2. Step 2: Check the @foreach($errors->any() as $error) loop

   $errors->any() returns a boolean, which cannot be looped. This causes an error.

3. Final Answer:

   $errors->any() returns boolean, cannot be looped -> Option A

4. Quick Check:

   Loop must use $errors->all(), not $errors->any() [OK]

Hint: Loop only over $errors->all(), not $errors->any() [OK]

Common Mistakes:

• Trying to loop over $errors->any()
• Confusing $errors->any() and $errors->all()
• Ignoring missing closing tags

5. You want to display validation errors next to each input field in a form. Which Blade snippet correctly shows the first error for the 'email' field only?

hard

A. @foreach($errors->all('email') as $error){{ $error }}@endforeach

B. @if($errors->any('email')){{ $errors->all('email') }}@endif

C. @error('email'){{ $message }}@enderror

D. @if($errors->has('email')){{ $errors->first('email') }}@endif

Solution

1. Step 1: Use the @error directive for single field errors

   Laravel provides @error('field') to check and display the first error message for that field using $message.

2. Step 2: Confirm correct HTML and usage

   Wrapping the message in a <span> with class error is a common pattern for styling.

3. Final Answer:

   @error('email')<span class="error">{{ $message }}</span>@enderror -> Option C

4. Quick Check:

   Use @error('field') for single field error [OK]

Hint: Use @error('field') to show first error message [OK]

Common Mistakes:

• Using $errors->all('field') which returns array, not string
• Not using @error directive for single errors
• Displaying errors without checking if they exist