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

Mis à jour il y a 1 mois

Un tutoriel pour afficher les messages d’erreur de validation avec Laravel, sur un formulaire stylisé avec Bootstrap 5

Wilo Ahadi

Auteur

Wilo A.

Technologies

Laravel, Bootstrap, HTML, CSS
Voir aussi Un tutoriel pour formater un timestamp en jour, mois, année, heures, minutes et secondes avec les fonctions PHP date() et gmdate(). En savoir plus

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 :

Formulaire stylisé avec Bootstrap 5

Le rendu de ce formulaire vient d'une vue (template Bladeresources/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 :

Formulaire stylisé avec Bootstrap 5 + Erreurs de validation

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 😉

Cette publication vous a plu ?
Partagez-la avec vos ami(e)s sur les réseaux sociaux.

Wilo Ahadi

Wilo Ahadi, l'auteur

Passionné de l'informatique, je suis spécialiste en techniques des systèmes et réseaux, développeur web et mobile, infographiste et designer, ... J'aime partager mon expérience en formant sur la plateforme Akili School

Voir profil

Commentaires