Bootstrap - Validation: A Guide for Beginners

Bonjour là-bas, futurs développeurs web ! Aujourd'hui, nous allons plonger dans le monde de la validation Bootstrap. En tant que votre professeur d'informatique bien-aimé du quartier, je suis excité de vous guider dans ce voyage. Ne vous inquiétez pas si vous êtes nouveau dans la programmation - nous allons commencer par les bases et progresser pas à pas. À la fin de ce tutoriel, vous serez capable de valider des formulaires comme un pro !

Qu'est-ce que la Validation Bootstrap ?

Avant de rentrer dans les détails, comprenstons ce qu'est la validation Bootstrap. Imaginez que vous remplissez un formulaire en ligne et que vous oubliez accidentellement de remplir un champ obligatoire. Soudain, le formulaire met en surbrillance ce champ en rouge, vous demandant de le remplir. C'est la validation de formulaire en action ! Bootstrap, notre fidèle toolkit front-end, nous fournit des fonctionnalités de validation intégrées pour rendre ce processus en douceur et convivial.

Styles Personnalisés

Commençons avec les styles personnalisés pour notre validation de formulaire. Bootstrap nous permet d'ajouter notre propre touche à processus de validation. Voici un exemple simple :

<form class="needs-validation" novalidate>
<div class="form-group">
<label for="username">Nom d'utilisateur</label>
<input type="text" class="form-control" id="username" required>
<div class="invalid-feedback">
Veuillez choisir un nom d'utilisateur.
</div>
</div>
<button class="btn btn-primary" type="submit">Soumettre le formulaire</button>
</form>

Dans cet exemple, nous avons ajouté la classe needs-validation à notre formulaire et avons défini novalidate pour empêcher la validation par défaut du navigateur. L'attribut required sur le champ d'entrée indique à Bootstrap que ce champ doit être rempli.

Maintenant, ajoutons un peu de JavaScript pour qu'il fonctionne :

(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();

Ce code JavaScript ajoute des écouteurs d'événement à notre formulaire, vérifiant la validité lorsque le formulaire est soumis. Si le formulaire est invalide, il empêche la soumission et ajoute la classe was-validated, qui déclenche nos styles personnalisés.

Styles par Défaut du Navigateur

Parfois, vous pourriez vouloir utiliser les styles de validation par défaut du navigateur. C'est comme laisser le navigateur faire le travail lourd pour vous ! Voici comment vous pouvez faire :

<form>
<div class="form-group">
<label for="email">Adresse email</label>
<input type="email" class="form-control" id="email" required>
</div>
<button class="btn btn-primary" type="submit">Soumettre</button>
</form>

Dans ce cas, nous avons supprimé la classe needs-validation et l'attribut novalidate. Le navigateur gérera maintenant la validation en utilisant ses styles par défaut.

Validation Serveur

Bien que la validation côté client soit géniale pour l'expérience utilisateur, nous devrions toujours implémenter une validation côté serveur pour la sécurité. Voici un exemple simple en PHP :

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$email = test_input($_POST["email"]);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Format d'email invalide";
}
}

function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>

Ce code PHP vérifie si l'email soumis est valide. Souvenez-vous toujours : ne jamais faire confiance à l'entrée utilisateur !

Éléments Supportés

La validation Bootstrap prend en charge divers éléments de formulaire. Jetons un œil à quelques-uns :

<form class="needs-validation" novalidate>
<div class="form-group">
<label for="username">Nom d'utilisateur</label>
<input type="text" class="form-control" id="username" required>
</div>
<div class="form-group">
<label for="password">Mot de passe</label>
<input type="password" class="form-control" id="password" required>
</div>
<div class="form-group">
<label for="country">Pays</label>
<select class="form-control" id="country" required>
<option value="">Choisissez...</option>
<option>USA</option>
<option>UK</option>
<option>Canada</option>
</select>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="terms" required>
<label class="form-check-label" for="terms">
Accepter les conditions générales
</label>
</div>
</div>
<button class="btn btn-primary" type="submit">Soumettre le formulaire</button>
</form>

Ce formulaire inclut des entrées de texte, des entrées de mot de passe, des listes déroulantes et des cases à cocher - tous pris en charge par la validation Bootstrap.

Infobulles

Vous souhaitez ajouter un peu de peps à vos messages de validation ? Essayez les infobulles ! Voici comment :

<form class="needs-validation" novalidate>
<div class="form-group">
<label for="username">Nom d'utilisateur</label>
<input type="text" class="form-control" id="username" required>
<div class="invalid-tooltip">
Veuillez choisir un nom d'utilisateur unique.
</div>
</div>
<button class="btn btn-primary" type="submit">Soumettre le formulaire</button>
</form>

Nous avons remplacé invalid-feedback par invalid-tooltip. Maintenant, au lieu de texte sous l'entrée, vous verrez une belle infobulle !

Méthodes de Validation

Voici un tableau des méthodes de validation courantes que vous pouvez utiliser :

Méthode	Description
required	Le champ ne peut pas être vide
minlength	Longueur minimale de caractères
maxlength	Longueur maximale de caractères
min	Valeur minimale pour les entrées numériques
max	Valeur maximale pour les entrées numériques
type="email"	Doit être une adresse email valide
pattern	Doit correspondre à un modèle spécifique

Souvenez-vous, vous pouvez combiner ces méthodes pour des règles de validation plus complexes !

Et voilà, les amis ! Nous avons couvert les bases de la validation Bootstrap, des styles personnalisés aux infobulles. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec ces concepts. Bon codage, et que vos formulaires soient toujours validés !

Credits: Image by storyset