Traiter la soumission du formulaire

Quand vous soumettez un formulaire HTML, le navigateur tente normalement d’envoyer ses champs et de recharger la page. Dans un gestionnaire de tâches, ce comportement interromprait l’interaction et ferait disparaître l’affichage construit en JavaScript. Vous allez intercepter la soumission, nettoyer le titre saisi et afficher la nouvelle tâche sans quitter la page.

Intercepter la soumission

L’événement submit est déclenché lorsque vous validez un formulaire, par exemple en cliquant sur son bouton ou en appuyant sur Entrée dans le champ. Dans son gestionnaire, event.preventDefault() annule l’envoi et le rechargement automatiques. Vous pouvez alors lire la valeur saisie et décider vous-même de la suite.

Vous avez déjà sélectionné le formulaire et le champ dans les leçons précédentes. Le fichier ci-dessous reprend ces sélections et la création sécurisée d’une tâche à partir du modèle HTML ; il remplace entièrement js/main.js. Le titre transmis à creerElementTache() est une chaîne nettoyée, tandis que l’identifiant de démonstration sert seulement à remplir l’attribut de la ligne.

const formulaire = document.querySelector("[data-formulaire]");
const champTitre = document.querySelector("[name='titre']");
const liste = document.querySelector("[data-liste]");
const modeleTache = document.querySelector("[data-modele-tache]");

function verifierElements() {
  if (!formulaire || !champTitre || !liste || !modeleTache) {
    throw new Error("Un élément nécessaire au formulaire est absent de la page.");
  }
}

function creerElementTache(tache) {
  const fragment = modeleTache.content.cloneNode(true);
  const elementTache = fragment.querySelector(".atelier-tache");
  const titre = fragment.querySelector("[data-titre]");
  const caseTerminee = fragment.querySelector("[data-action='basculer']");

  if (!elementTache || !titre || !caseTerminee) {
    throw new Error("Le modèle de tâche est incomplet.");
  }

  elementTache.dataset.id = tache.id;
  titre.textContent = tache.titre;
  caseTerminee.checked = false;

  return fragment;
}

function afficherTache(tache) {
  liste.append(creerElementTache(tache));
}

function traiterSoumission(event) {
  event.preventDefault();

  const donnees = new FormData(formulaire);
  const titre = String(donnees.get("titre") ?? "").trim();

  if (titre === "") {
    champTitre.focus();
    return;
  }

  afficherTache({ id: `temporaire-${Date.now()}`, titre });
  formulaire.reset();
  champTitre.focus();
}

function demarrer() {
  verifierElements();
  formulaire.addEventListener("submit", traiterSoumission);
}

demarrer();

La valeur est récupérée avec FormData, en utilisant le nom titre déjà défini sur le champ HTML. trim() supprime les espaces au début et à la fin : une saisie composée uniquement d’espaces devient donc vide et n’ajoute aucune ligne. Pour une valeur valide, le code affiche la tâche, vide le formulaire, puis replace le curseur dans le champ.

Vérifier le résultat dans la page

Ouvrez index.html dans le navigateur, saisissez Préparer le compte rendu, puis validez avec le bouton ou la touche Entrée. La ligne apparaît dans la liste, le champ est vidé et la page ne se recharge pas. Essayez aussi une saisie composée d’espaces : aucune ligne n’est ajoutée et le champ reprend le focus.

À retenir

• Écoutez l’événement `submit` du formulaire pour traiter aussi bien le clic que la validation au clavier.
• Appelez `preventDefault()` pour empêcher l’envoi et le rechargement standards.
• Récupérez le champ avec `FormData`, puis nettoyez sa valeur avec `trim()`.
• Vérifiez le résultat nettoyé avant d’ajouter une ligne à l’affichage.

Dans la prochaine leçon, vous traiterez les actions effectuées directement sur les lignes de tâches avec la délégation d’événements.