JavaScript

TP 14 : Validation d'un formulaire en JavaScript

0 chapitres 0 QCM Accès gratuit

À propos de ce cours

Validation d'un formulaire en JavaScript. Dans cette leçon du cours JavaScript, vous apprendrez à : lire toutes les données d'un formulaire réel, avec des types de champs variés ; écrire un ensemble de règles de validation et des messages utiles ; valider en direct sans gêner l'utilisateur, puis à l'envoi ; envoyer les données avec fetch et gérer succès et erreurs.

Chapitre 14 — La gestion des formulaires · 14.8 TP 14 : Validation d'un formulaire en JavaScript

🎯 Objectifs de la leçon
• lire toutes les données d'un formulaire réel, avec des types de champs variés ;
• écrire un ensemble de règles de validation et des messages utiles ;
• valider en direct sans gêner l'utilisateur, puis à l'envoi ;
• envoyer les données avec fetch et gérer succès et erreurs.

Présentation

Le Club Informatique de votre établissement ouvre ses inscriptions en ligne. Le formulaire HTML et sa mise en forme sont prêts : vous écrivez tout le JavaScript dans inscription.js, sans modifier index.html. Les questions vous guident ; aucune solution n'est donnée.

Voici le comportement attendu quand l'utilisateur tente d'envoyer un formulaire incomplet :

Formulaire avec résumé et messages d'erreur
Figure 1 — Résumé des erreurs en haut, message sous chaque champ, champs colorés.

Et quand tout est correct et que le serveur a répondu :

Message de confirmation d'inscription
Figure 2 — Le formulaire est remplacé par la confirmation.

Cahier des charges

Champ	Règle
Nom, Prénom	obligatoires ; lettres (accents compris), espaces, tirets, apostrophes ; 2 à 40 caractères
E-mail	obligatoire ; format nom@domaine.extension
Téléphone	obligatoire ; 8 chiffres commençant par 2 à 9, éventuellement précédés de +216 ; espaces autorisés à la saisie
Date de naissance	obligatoire ; au moins 15 ans aujourd'hui
Filière	obligatoire (l'option « — Choisissez — » ne compte pas)
Année d'études	un bouton coché
Centres d'intérêt	de 1 à 3 cases cochées
Mot de passe	8 caractères minimum, avec au moins une minuscule, une majuscule et un chiffre ; jauge de force de 0 à 4
Confirmation	identique au mot de passe
Motivation	30 caractères minimum (300 maximum) ; compteur « n / 300 » en direct
Règlement	case cochée

Fichiers de départ

⬇ Télécharger les fichiers de départ du TP (tp14-depart.zip)

index.html (à ne pas modifier)

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Inscription — Club Informatique</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <h1>Inscription au Club Informatique</h1>

    <!-- Résumé des erreurs, lu par les lecteurs d'écran -->
    <div id="resume" role="alert" hidden></div>

    <form id="inscription" action="https://jsonplaceholder.typicode.com/users" method="post" novalidate>
      <div class="ligne">
        <label>Nom <input name="nom" autocomplete="family-name" aria-describedby="err-nom"><span class="erreur" id="err-nom"></span></label>
        <label>Prénom <input name="prenom" autocomplete="given-name" aria-describedby="err-prenom"><span class="erreur" id="err-prenom"></span></label>
      </div>
      <label>E-mail <input name="email" type="email" autocomplete="email" aria-describedby="err-email"><span class="erreur" id="err-email"></span></label>
      <div class="ligne">
        <label>Téléphone <input name="tel" inputmode="tel" placeholder="+216 98 123 456" aria-describedby="err-tel"><span class="erreur" id="err-tel"></span></label>
        <label>Date de naissance <input name="naissance" type="date" aria-describedby="err-naissance"><span class="erreur" id="err-naissance"></span></label>
      </div>
      <label>Filière
        <select name="filiere" aria-describedby="err-filiere">
          <option value="">— Choisissez —</option>
          <option value="info">Informatique</option>
          <option value="maths">Mathématiques</option>
          <option value="sciences">Sciences expérimentales</option>
          <option value="eco">Économie et gestion</option>
        </select>
        <span class="erreur" id="err-filiere"></span>
      </label>
      <fieldset aria-describedby="err-niveau">
        <legend>Année d'études</legend>
        <div class="choix">
          <label><input type="radio" name="niveau" value="1"> 1re</label>
          <label><input type="radio" name="niveau" value="2"> 2e</label>
          <label><input type="radio" name="niveau" value="3"> 3e</label>
          <label><input type="radio" name="niveau" value="4"> 4e</label>
        </div>
        <span class="erreur" id="err-niveau"></span>
      </fieldset>
      <fieldset aria-describedby="err-interets">
        <legend>Centres d'intérêt (1 à 3)</legend>
        <div class="choix">
          <label><input type="checkbox" name="interets" value="web"> Web</label>
          <label><input type="checkbox" name="interets" value="jeux"> Jeux vidéo</label>
          <label><input type="checkbox" name="interets" value="robotique"> Robotique</label>
          <label><input type="checkbox" name="interets" value="ia"> Intelligence artificielle</label>
          <label><input type="checkbox" name="interets" value="securite"> Cybersécurité</label>
        </div>
        <span class="erreur" id="err-interets"></span>
      </fieldset>
      <div class="ligne">
        <label>Mot de passe
          <input name="mdp" type="password" autocomplete="new-password" aria-describedby="err-mdp aide-mdp">
          <meter id="force" min="0" max="4" low="2" high="3" optimum="4" value="0"></meter>
          <small id="aide-mdp">8 caractères minimum, avec majuscule, minuscule et chiffre.</small>
          <span class="erreur" id="err-mdp"></span>
        </label>
        <label>Confirmation <input name="confirmation" type="password" autocomplete="new-password" aria-describedby="err-confirmation"><span class="erreur" id="err-confirmation"></span></label>
      </div>
      <label>Pourquoi voulez-vous rejoindre le club ?
        <textarea name="motivation" rows="4" maxlength="300" aria-describedby="err-motivation compteur"></textarea>
        <small id="compteur">0 / 300</small>
        <span class="erreur" id="err-motivation"></span>
      </label>
      <label class="case"><input type="checkbox" name="conditions" aria-describedby="err-conditions"> J'accepte le règlement du club</label>
      <span class="erreur" id="err-conditions"></span>
      <button>Envoyer mon inscription</button>
    </form>

    <section id="succes" hidden></section>
  </main>
  <script src="inscription.js"></script>
</body>
</html>

style.css (à ne pas modifier)

/* L'attribut hidden doit toujours gagner, même face à display: grid */
[hidden] { display: none !important; }

body { font-family: system-ui, sans-serif; background: #eef2f7; color: #263238; margin: 0; }
main { max-width: 720px; margin: 24px auto; padding: 0 16px; }
h1 { font-size: 1.5rem; }
form, #succes { display: grid; gap: 14px; background: #fff; padding: 22px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 560px) { .ligne { grid-template-columns: 1fr; } }
label { display: grid; gap: 4px; font-weight: 600; font-size: 14px; }
label.case { display: flex; align-items: center; gap: 8px; }
input, select, textarea, button { font: inherit; padding: 8px 10px; border: 1px solid #b0bec5; border-radius: 6px; }
fieldset { border: 1px solid #cfd8dc; border-radius: 8px; }
legend { font-weight: 600; font-size: 14px; }
.choix { display: flex; flex-wrap: wrap; gap: 14px; }
.choix label { display: flex; align-items: center; gap: 6px; font-weight: normal; }
small { color: #607d8b; font-weight: normal; }
meter { width: 100%; height: 10px; }
.erreur { color: #c62828; font-size: 13px; font-weight: normal; min-height: 1em; }
[aria-invalid="true"] { border-color: #c62828; background: #ffebee; }
input[aria-invalid="false"], select[aria-invalid="false"], textarea[aria-invalid="false"] { border-color: #2e7d32; }
button { background: #1565c0; color: #fff; border: none; padding: 12px; font-weight: 700; cursor: pointer; }
button:disabled { background: #90a4ae; cursor: wait; }
#resume { background: #ffebee; border: 1px solid #ef9a9a; border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; }
#resume a { color: #b71c1c; }
#succes { border-left: 6px solid #2e7d32; }

inscription.js (à compléter)

// =====================================================================
//  TP 14 — Validation du formulaire d'inscription : fichier de départ
//  Ne modifiez pas index.html : tout se fait ici.
// =====================================================================

const form = document.querySelector("#inscription");

// PARTIE 2 — Lire les valeurs du formulaire


// PARTIE 3 — Les règles de validation (une fonction par champ)


// PARTIE 4 — Afficher les erreurs à côté des champs


// PARTIE 5 — Validation en direct, force du mot de passe, compteur


// PARTIE 6 — À l'envoi : résumé des erreurs ou envoi avec fetch

⚠️ Attention
Observez la première règle de style.css: [hidden] { display: none !important; }. Sans elle, #succes { display: grid } l'emporterait sur l'attribut hidden et le message de succès serait visible dès le départ. Nous avons rencontré ce bug en testant le TP : c'est un piège classique quand on cache des éléments avec hidden.