How to Validate Laravel Bootstrap Forms with Error Styling?

Get in Touch With Us

Submitting the form below will ensure a prompt response from us.

Laravel makes it easy to handle form validation, and when combined with Bootstrap, you can ensure that your forms not only work efficiently but also look great. Below is a step-by-step guide on implementing form validation in Laravel Bootstrap styling.

Step 1: Set Up a Basic Laravel Form

First, ensure you have a basic Laravel setup with Bootstrap included. If you haven’t installed Bootstrap, you can include it in your resources/views/layouts/app.blade.php file:


<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

Then create a basic form inside a Blade view, for example, resources/views/contact.blade.php:


<form method="POST" action="{{ route('contact.submit') }}">
    @csrf
    <div class="form-group">
        <label for="name">Name</label>
        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" id="name" value="{{ old('name') }}">
        @error('name')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>
    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" name="email" class="form-control @error('email') is-invalid @enderror" id="email" value="{{ old('email') }}">
        @error('email')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

In this form:

@error directive is used to check if there’s any error with a specific field.
If an error exists, the is-invalid class is added to the input field to style it with Bootstrap’s error highlighting.
The invalid-feedback class is used to display the error message below the respective input field.

Step 2: Set Up Validation in Controller

Next, you need to handle the form validation in your controller. For example, in ContactController.php:


namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ContactController extends Controller
{
    public function showForm()
    {
        return view('contact');
    }
    public function submitForm(Request $request)
    {
        // Validate the request data
        $validatedData = $request->validate([
            'name' => 'required|string|max:255',
            'email' => 'required|email|max:255',
        ]);
        // Process the data (for example, save it to the database)
        return redirect()->route('contact.success');
    }
}

In this example:

The validate method validates the incoming form data.
If validation fails, Laravel will automatically redirect back to the form with the error messages.

Step 3: Handle Validation Errors in the Blade View

The validation errors will automatically be flashed to the session, so you can display them in the Blade view. In the above form code, we’ve already set up the @error directive to display validation error messages.

Important Notes:

Old Input: The old(‘name’) and old(’email’) functions ensure that the previously entered values remain in the form after validation fails.
Bootstrap Styling: The classes is-invalid and invalid-feedback from Bootstrap are used to show the error state and messages.

Step 4: Customize Error Messages (Optional)

You can customize the validation error messages by adding them to the resources/lang/en/validation.php file:


'custom' => [
    'name' => [
        'required' => 'Please enter your name.',
    ],
    'email' => [
        'required' => 'Please provide your email address.',
        'email' => 'Please enter a valid email address.',
    ],
],

This will display custom messages for specific fields.

Important Considerations

Form Validation in Controller: Laravel’s built-in validate method makes it easy to handle form validation. You can add rules as needed (e.g., required, email, max).
Error Styling: The @error directive in Blade and the is-invalid class from Bootstrap provide a seamless way to display validation errors with styling.
User Experience: Make sure the form is easy to navigate. Provide clear and concise error messages, and use Bootstrap’s feedback classes for better UI design.

About Author

Jayanti Katariya is the CEO of Moon Technolabs, a fast-growing IT solutions provider, with 18+ years of experience in the industry. Passionate about developing creative apps from a young age, he pursued an engineering degree to further this interest. Under his leadership, Moon Technolabs has helped numerous brands establish their online presence and he has also launched an invoicing software that assists businesses to streamline their financial operations.