Partie 9 — Formulaires et interaction utilisateur : lire, valider et guider

Un formulaire, c’est l’endroit où l’utilisateur vous parle : il saisit son nom, son email, un mot de passe, un message, un choix… Si votre formulaire est mal géré, l’utilisateur se frustre, abandonne, ou envoie des données incorrectes.

Le rôle de JavaScript ici est simple : améliorer l’expérience. Le but n’est pas de “bloquer” l’utilisateur, mais de le guider : vérifier les champs, afficher des messages clairs et éviter des rechargements inutiles.

👉 Important : une validation JavaScript est utile pour l’UX, mais elle ne remplace pas la validation côté serveur. Dans un vrai projet, vous faites les deux.

1) Lire les valeurs des champs (inputs)

Pour récupérer ce que l’utilisateur a tapé, on sélectionne l’input puis on lit sa valeur via .value.

Exemple HTML :

<input type="text" id="nom" placeholder="Votre nom">
<button id="btnLire">Lire</button>
  

Exemple JavaScript :

const inputNom = document.getElementById("nom");
const btnLire = document.getElementById("btnLire");

btnLire.addEventListener("click", () => {
  console.log("Nom saisi :", inputNom.value);
});
  

Ici, chaque clic affiche la valeur actuelle. C’est utile pour tester, mais dans un vrai formulaire on utilise plutôt l’événement submit.

Lire plusieurs champs en même temps

const inputEmail = document.getElementById("email");
const inputPassword = document.getElementById("password");

// inputEmail.value
// inputPassword.value
  

Astuce “humaine” : quand vous récupérez des valeurs, pensez toujours à nettoyer : enlever les espaces au début/à la fin avec trim().

const email = inputEmail.value.trim();
  

2) Empêcher le rechargement de la page (submit)

Par défaut, quand un formulaire est envoyé, le navigateur recharge la page. C’est le comportement “classique” du web.

Quand vous voulez gérer le formulaire en JavaScript (validation, messages, appel API), vous devez empêcher ce rechargement avec event.preventDefault().

Exemple HTML :

<form id="loginForm">
  <input type="email" id="email" placeholder="Email">
  <input type="password" id="password" placeholder="Mot de passe">
  <button type="submit">Se connecter</button>
</form>
  

JavaScript :

const form = document.getElementById("loginForm");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  console.log("Formulaire intercepté : pas de reload");
});
  

✅ À retenir : le submit est le bon endroit pour lire les valeurs et valider.

3) Validation de base (simple, utile, réaliste)

Une validation “de base” veut dire :

• Vérifier que les champs ne sont pas vides
• Vérifier un format (email)
• Vérifier une longueur minimale (mot de passe)

Exemple : champs obligatoires

function estVide(value) {
  return value.trim() === "";
}
  

Utilisation dans un submit :

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const email = document.getElementById("email").value.trim();
  const password = document.getElementById("password").value;

  if (estVide(email) || estVide(password)) {
    console.log("Erreur : champs obligatoires");
    return;
  }

  console.log("OK : champs remplis");
});
  

Exemple : vérifier un email (version simple)

Pour débuter, on peut utiliser une vérification basique : le texte doit contenir un @ et un point .. Ce n’est pas parfait, mais c’est suffisant pour apprendre.

function emailValide(email) {
  return email.includes("@") && email.includes(".");
}
  

Exemple : mot de passe minimum 8 caractères

function motDePasseValide(password) {
  return password.length >= 8;
}
  

4) Afficher des messages d’erreur / succès (UX claire)

Un formulaire “pro” ne se contente pas d’un console.log. Il affiche un message visible à l’utilisateur.

Exemple HTML :

<div id="alert" style="display:none; padding:12px; border-radius:10px; margin-top:12px;"></div>
  

JavaScript : fonction réutilisable pour afficher un message.

const alertBox = document.getElementById("alert");

function showMessage(type, text) {
  alertBox.style.display = "block";
  alertBox.textContent = text;

  if (type === "error") {
    alertBox.style.background = "#fff7ed";
    alertBox.style.border = "1px solid #fed7aa";
    alertBox.style.color = "#9a3412";
  } else {
    alertBox.style.background = "#f0fdf4";
    alertBox.style.border = "1px solid #bbf7d0";
    alertBox.style.color = "#166534";
  }
}
  

Maintenant, dans le submit, on remplace les logs par des messages.

5) Mini-projet : formulaire interactif complet (login simple)

Objectif : créer un formulaire de connexion simple, sans rechargement, avec validation et messages clairs.

HTML (structure)

<form id="loginForm" style="max-width:420px; padding:16px; border:1px solid #e5e7eb; border-radius:14px;">

  <h3 style="margin:0 0 12px 0;">Connexion</h3>

  <label style="display:block; margin-bottom:6px;">Email</label>
  <input type="email" id="email" placeholder="ex: nom@email.com"
    style="width:100%; padding:10px; border:1px solid #ddd; border-radius:10px; margin-bottom:12px;">

  <label style="display:block; margin-bottom:6px;">Mot de passe</label>
  <input type="password" id="password" placeholder="Minimum 8 caractères"
    style="width:100%; padding:10px; border:1px solid #ddd; border-radius:10px; margin-bottom:12px;">

  <button type="submit"
    style="width:100%; padding:12px; border:none; border-radius:10px; background:#0f172a; color:#fff; cursor:pointer;">
    Se connecter
  </button>

  <div id="alert" style="display:none; padding:12px; border-radius:10px; margin-top:12px;"></div>

</form>
  

JavaScript (logique)

const form = document.getElementById("loginForm");
const inputEmail = document.getElementById("email");
const inputPassword = document.getElementById("password");
const alertBox = document.getElementById("alert");

function showMessage(type, text) {
  alertBox.style.display = "block";
  alertBox.textContent = text;

  if (type === "error") {
    alertBox.style.background = "#fff7ed";
    alertBox.style.border = "1px solid #fed7aa";
    alertBox.style.color = "#9a3412";
  } else {
    alertBox.style.background = "#f0fdf4";
    alertBox.style.border = "1px solid #bbf7d0";
    alertBox.style.color = "#166534";
  }
}

function emailValide(email) {
  // Validation simple pour débuter
  return email.includes("@") && email.includes(".");
}

function motDePasseValide(password) {
  return password.length >= 8;
}

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const email = inputEmail.value.trim();
  const password = inputPassword.value;

  // 1) Champs obligatoires
  if (email === "" || password === "") {
    showMessage("error", "Veuillez remplir tous les champs.");
    return;
  }

  // 2) Format email
  if (!emailValide(email)) {
    showMessage("error", "Veuillez entrer un email valide.");
    return;
  }

  // 3) Longueur mot de passe
  if (!motDePasseValide(password)) {
    showMessage("error", "Le mot de passe doit contenir au moins 8 caractères.");
    return;
  }

  // Si tout est OK
  showMessage("success", "Connexion réussie (exemple). Vous pouvez continuer !");
});
  

✅ Ce mini-projet contient tout ce qu’on veut : lecture des valeurs, validation, prévention du reload, messages d’erreur/succès et une logique claire.

6) Bonus : améliorer l’interaction (validation en direct)

Une amélioration simple consiste à écouter l’événement input et donner un feedback en temps réel. Exemple : si l’utilisateur tape un mot de passe trop court, on peut lui afficher un message avant même l’envoi.

inputPassword.addEventListener("input", () => {
  if (inputPassword.value.length > 0 && inputPassword.value.length < 8) {
    showMessage("error", "Mot de passe trop court (min 8 caractères).");
  } else {
    alertBox.style.display = "none";
  }
});
  

👉 Astuce : n’affichez pas trop de messages. Gardez une UX simple et claire.

Les formulaires sont un élément central du web moderne. En maîtrisant la lecture des valeurs, la validation, et les messages utilisateur, vous pouvez déjà créer des pages très professionnelles.

Dans la Partie 10, nous allons approfondir les événements : comment ils fonctionnent, comment les organiser, et comment gérer des interfaces plus complexes (menus, modales, listes interactives).