Projet 3 — Formulaire multi-étapes (Niv. ⭐⭐⭐)

⏱️ TL;DR — Un assistant (wizard) en 3 étapes : Compte → Profil → Confirmation. Chaque étape valide ses champs avant de passer à la suivante ; une barre de progression indique l’avancement. Objectif : formulaires + validation + un peu de JS.

🎯 Cahier des charges

1. 3 étapes affichées une à la fois (onglets pilotés en JS, ou affichage conditionnel).
2. Barre de progression (progress) qui reflète l’étape courante (33 % / 66 % / 100 %).
3. Validation par étape : impossible d’avancer si les champs requis sont invalides (is-invalid + feedback).
4. Récapitulatif à la dernière étape.
5. Navigation : boutons Précédent / Suivant / Envoyer.

🔍 Endroits à visiter

Jalons

• Une seule étape visible à la fois.
• La barre de progression suit l’étape.
• Cliquer « Suivant » avec un champ vide affiche l’erreur et bloque.
• La dernière étape récapitule les saisies.
• « Envoyer » n’est possible que si tout est valide.

let step = 0
const panes = document.querySelectorAll('.wizard-step')
const bar = document.querySelector('.progress-bar')
 
function show(i) {
  panes.forEach((p, k) => p.classList.toggle('d-none', k !== i))
  bar.style.width = `${((i + 1) / panes.length) * 100}%`
}
 
function validStep(i) {
  const inputs = panes[i].querySelectorAll('[required]')
  let ok = true
  inputs.forEach(inp => {
    const bad = !inp.value.trim()
    inp.classList.toggle('is-invalid', bad)
    if (bad) ok = false
  })
  return ok
}
 
nextBtn.addEventListener('click', () => {
  if (validStep(step) && step < panes.length - 1) show(++step)
})
prevBtn.addEventListener('click', () => step > 0 && show(--step))
show(0)

Pour aller plus loin

• Sauvegardez la progression dans localStorage.
• Réécrivez-le en React avec un état step et un schéma de validation (voir Projet 5).

Projet suivant : Projet 4 — Thème sur-mesure