Laravel - Bootstrap : Afficher les erreurs de validation d’un formulaire

Introduction

Considérons que nous avons un projet Laravel dans lequel nous avons intégré Bootstrap 5. Les publications créer un projet Laravel avec Laragon et installer Bootstrap 5 via npm et laravel-mix dans un projet Laravel expliquent cela.

A l'adresse « /contact » de notre application, nous avons un formulaire HTML stylisé avec Bootstrap 5 qui donne le rendu suivant au navigateur :

Le rendu de ce formulaire vient d'une vue (template Blade) resources/views/contact.blade.php  :

<h1>Contact</h1>

<!-- Le formulaire et l'action -->
<form method="POST" action="{{ route('contact.store') }}" >

	<!-- Le champ "nom" -->
	<div class="mb-3" >
		<label class="form-label" for="name" >Nom</label>
		<input type="text" class="form-control" id="name" name="name" placeholder="Nom complet" >
	</div>

	<!-- Le champ email -->
	<div class="mb-3" >

		<label class="form-label" for="email" >Adresse email</label>
		<input type="email" class="form-control" id="email" name="email" placeholder="Votre adresse email" >

	</div>

	<!-- Champ CSRF -->
	@csrf

	<!-- Le bouton pour valider -->
	<button class="btn btn-success" >Valider</button>
	
</form>

L’action du formulaire est gérée par la route nommée «contact.store » qu'on retrouve au fichier routes/web.php :

Route::post('contact', [ ContactController::class, 'store' ])->name('contact.store');

La méthode store() du contrôleur ContactController décrit les règles de validation pour les données des champs « name » et « email » lorsque la requête est envoyée au serveur :

public function store (Request $request) {
    
    // Validation de "name" et "email"
    $this->validate($request, [
        'name' => "bail|required|string|min:2",
        'email' => "bail|required|email"
    ]);

    // ...
}

Nous voulons voir dans ce tutoriel comment afficher les erreurs de validation Laravel retournées à la vue, au formulaire Bootstrap 5 de cette façon :

Au moment de la rédaction de ce post, je suis à la version 9.24 de Laravel et 5.2 de Bootstrap.

L'objet $errors et la directive @error

En cas d’erreurs de validation des données envoyées via un formulaire, Laravel retourne sur la vue (template Blade) l'objet $errors (instance de Illuminate\Support\MessageBag) qui présente les méthodes suivantes :

• $errors->any() : Vérifie si au moins une erreur existe, retourne true ou false.
• $errors->has("nom_champ") : Vérifie si $errors contient un message d’erreur pour le champ nom_champ
• $errors->first("nom_champ", ":message") : Affiche le premier message d’erreur :message si il existe pour le champ nom_champ 
• …

Laravel met aussi à notre disposition la directive Blade @error("nom_champ") pour vérifier s’il existe une erreur de validation pour le champ nom_champ :

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

Dans la directive @error, nous avons accès au message d'erreur à travers la variable $message.

Afficher une erreur Laravel au formulaire Bootstrap 5

Pour afficher les erreurs d'un formulaire avec Bootstrap 5 (voir Bootstrap 5 - Validation), nous avons :

1. La classe CSS .is-invalid qu'il faut ajouter à la classe CSS .form-control d'un champ <input>, <textarea>, ... pour y indiquer la présence d'erreur
2. La classe CSS .invalid-feedback qu'il faut ajouter sur un autre élément HTML (<div>, <span>, ...) pour afficher le message d'erreur

Ainsi, nous pouvons vérifier la présence d'erreurs sur un input en utilisant la directive @error ou les méthodes de l'objet $errors pour ajouter/retirer la classe CSS .is-invalid qui va déclencher l'affichage/masquage de l'élément de classe CSS .invalid-feedback.

Le code initial de la vue resources/views/contact.blade.php devient :

<h1>Contact</h1>

<!-- Le formulaire et l'action -->
<form method="POST" action="{{ route('contact.store') }}" >

	<!-- Le champ "nom" -->
	<div class="mb-3" >
		<label class="form-label" for="name" >Nom</label>

		<!-- Classe CSS "is-invalid" si erreur pour "name" -->
		<input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" placeholder="Nom complet" >

		<!-- Le message d'erreur -->
		@error('name')
		<div class="invalid-feedback">{{ $message }}</div>
		@enderror

	</div>

	<!-- Le champ email -->
	<div class="mb-3" >
		<label class="form-label" for="email" >Adresse email</label>

		<!-- Classe CSS "is-invalid" si erreur pour "email" -->
		<input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email" placeholder="Votre adresse email" >

		<!-- Le message d'erreur -->
		@error('email')
		<div class="invalid-feedback">{{ $message }}</div>
		@enderror

	</div>

	<!-- Champ CSRF -->
	@csrf

	<!-- Le bouton pour valider -->
	<button class="btn btn-success" >Valider</button>
	
</form>

Portez-vous bien 😉