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

Need a 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
}

Need a 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
    

Need a 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

Need a hint?

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