Validation de formulaire avec JavaScript

Objectif de la semaine : valider un formulaire de manière robuste.

Méthode recommandée : écris une règle claire par champ et affiche un message précis. Avancez par petites étapes et testez chaque changement immédiatement.

La validation côté client (JavaScript) vérifie les données avant de les envoyer. Elle améliore l'expérience utilisateur, mais dans ce cours nous restons sur la base côté client.

Pensez la validation en 4 étapes : lire les champs, vérifier chaque règle, afficher un message clair par champ, puis soumettre seulement si tout est valide.

1) Écouter la soumission du formulaire

On intercepte l'événement submit pour empêcher l'envoi immédiat, le temps de vérifier les règles.

const form = document.querySelector('#monFormulaire');

form.addEventListener('submit', function(event) {
  event.preventDefault();
  // La validation sera faite ici
});

2) Lire les valeurs des champs

On récupère d'abord les données à valider. Cette étape doit toujours être claire et centralisée.

const nom = document.querySelector('#nom').value.trim();
const courriel = document.querySelector('#courriel').value.trim();
const age = parseInt(document.querySelector('#age').value, 10);

3) Vérifier chaque règle

On valide un champ à la fois, avec un message précis. La variable valide garde l'état global du formulaire.

let valide = true;

if (nom === '') {
  afficherErreur('errNom', 'Le nom est obligatoire.');
  valide = false;
} else {
  effacerErreur('errNom');
}

if (!courriel.includes('@')) {
  afficherErreur('errCourriel', 'Courriel invalide.');
  valide = false;
} else {
  effacerErreur('errCourriel');
}

if (isNaN(age) || age < 18) {
  afficherErreur('errAge', 'Vous devez avoir 18 ans ou plus.');
  valide = false;
} else {
  effacerErreur('errAge');
}

4) Finaliser si tout est valide

Quand toutes les règles passent, on affiche un succès puis on réinitialise le formulaire.

if (valide) {
  afficherSucces('Formulaire envoyé avec succès !');
  form.reset();
}

Séparer les fonctions de message (erreur/succès) évite de répéter le même code partout. On obtient une validation plus propre, plus lisible et plus facile à maintenir.

Fonction 1 : afficher une erreur

Cette fonction centralise l'affichage des erreurs sous les champs, ce qui évite la duplication dans chaque condition.

function afficherErreur(idMessage, texte) {
  const el = document.getElementById(idMessage);
  el.textContent = texte;
  el.style.display = 'block';
  el.style.color = '#c0392b';
}

Fonction 2 : effacer une erreur

Quand une valeur redevient valide, il faut retirer le message pour garder l'interface propre.

function effacerErreur(idMessage) {
  const el = document.getElementById(idMessage);
  el.textContent = '';
  el.style.display = 'none';
}

Fonction 3 : afficher un succès temporaire

Le message de confirmation apparaît quelques secondes, puis disparaît automatiquement.

function afficherSucces(texte) {
  const confirmation = document.getElementById('confirmation');
  confirmation.textContent = texte;
  confirmation.style.display = 'block';

  setTimeout(() => {
    confirmation.style.display = 'none';
  }, 4000);
}

Structure HTML recommandée pour les messages

Chaque champ devrait avoir une zone dédiée pour afficher son message d'erreur.

<label for="nom">Nom</label>
<input type="text" id="nom" name="nom">
<p id="errNom" class="error-msg"></p>

Expressions régulières (regex) utiles

Les regex permettent de vérifier des formats précis sans écrire beaucoup de conditions.

const regexCourriel = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
console.log(regexCourriel.test('marie@exemple.com')); // true

const regexTel = /^\d{3}-\d{3}-\d{4}$/;
console.log(regexTel.test('418-555-1234')); // true

const regexMdp = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;

if (!regexCourriel.test(courriel)) {
  afficherErreur('errCourriel', 'Format de courriel invalide.');
}

Reproduisez le plus fidèlement possible la démo interactive de formulaire avec validation.

1. Recréez la structure HTML du formulaire (champs, messages d’erreur et zone de confirmation).
2. Implémentez les validations JavaScript pour obtenir le même comportement que la démo.
3. Ajoutez le CSS nécessaire pour obtenir un rendu visuel proche de la démo.

Les questions sont cachées par défaut. Clique sur « Commencer le quiz » pour débuter.