Aller au contenu

TP – Filtrer les salles et valider le formulaire

BTS SIO SISR 2e année – Bloc 1 – S07 – individuel

Note

But. Tu ajoutes un comportement à la page des salles (S06) : un filtre par capacité et une validation du formulaire avec des messages clairs.

Durée : 2 h 50 (parties A à D), plus le bilan. Prérequis : cours S07 lu ; ta page de S06. Fichier de départ : salles-a-completer.js.

Note

Comment ce TP fonctionne. Avant chaque étape, tu écris ce que tu anticipes (« J'anticipe »). Puis tu confrontes avec les éléments de réponse.

Nom : ____________

Contraintes

  • Aucune bibliothèque. Le script est un fichier salles.js chargé en fin de body.
  • Données fictives.

Partie A – Préparer la page et explorer la console (≈ 30 min)

  1. Dans salles.html, ajoute avant le tableau un champ numérique id="capacite-min" (libellé « Capacité minimale », valeur 0) et, en fin de body, <script src="salles.js"></script>.
  2. Ouvre la console et tape :
const lignes = document.querySelectorAll("#tableau-salles tbody tr");
lignes.length
lignes[0].cells[1].textContent
typeof lignes[0].cells[1].textContent

J'anticipe. Que vaut lignes.length ? Quel est le type de la capacité lue dans la cellule ? ______________________

Éléments de réponse

lignes.length vaut 6 (une ligne par salle). La capacité lue est du texte ("string") : "200", pas 200. Il faut la convertir pour comparer.

Partie B – Le filtre de capacité (≈ 50 min)

Complète filtrerSalles() : elle masque (classe masque) les salles dont la capacité est inférieure au minimum saisi. Branche-la à l'événement input du champ.

Test. Saisis 50 : quelles salles restent visibles ? ______________________

Je comprends. Que se passerait-il si tu comparais sans Number(...) : « 120 < 50 » ? ______________________

Éléments de réponse

Avec 50, il reste : salle des fêtes (200), gymnase (120), salle d'exposition (60). Sans conversion, la comparaison de textes est alphabétique : "120" < "50" est vrai (le caractère « 1 » précède « 5 ») : le gymnase serait masqué à tort.

Partie C – La validation du formulaire (≈ 60 min)

Complète validerFormulaire() pour contrôler : nom non vide ; courriel au bon format ; date renseignée et pas dans le passé ; heures renseignées ; fin après début. À l'envoi, si la liste d'erreurs n'est pas vide, bloque l'envoi et affiche les messages dans #message.

J'anticipe. Comment compares-tu deux heures "09:30" et "10:00" de façon fiable ? ______________________

Cas testé Résultat attendu Résultat obtenu
Formulaire vide Envoi bloqué, messages « obligatoire »
Fin avant début (10:00 → 09:00) Envoi bloqué
Date dans le passé Envoi bloqué
Courriel « pas-un-courriel » Envoi bloqué
Tout correct Envoi accepté
Éléments de réponse

Convertir chaque heure en minutes depuis minuit (h * 60 + m) puis comparer des nombres : 570 et 600. Comparer les textes marcherait ici (format fixe sur 2 chiffres) mais reste fragile ; la conversion est plus sûre.

Partie D – Confort ou sécurité ? (≈ 30 min)

  1. Dans les outils de développement, supprime le script (ou l'attribut required) et envoie le formulaire avec des champs vides : que se passe-t-il ? ______________________
  2. Ouvre l'onglet Réseau : que contient la requête envoyée au serveur ? ______________________
  3. Conclus en trois lignes : à quoi sert la validation côté navigateur, et pourquoi le serveur doit la refaire.
Éléments de réponse
  1. Sans script, le formulaire part tel quel : le navigateur ne garantit rien. 2. L'onglet Réseau montre les champs envoyés (méthode POST, données du formulaire) : n'importe qui peut forger la même requête. 3. La validation côté navigateur améliore le confort (message immédiat, moins d'allers-retours) ; elle ne protège pas : le serveur contrôle toujours (S09).

Retour en entreprise (si ta situation le permet)

Repère sur une application web de ton entreprise un formulaire avec validation immédiate. Que contrôle-t-elle ? Qu'arrive-t-il si tu la contournes (sans rien modifier d'un système réel : observe, ne teste pas sur la production) ?

Rendu

Archive RENDU-B1A2-S07-NOM.zip : salles.html, salles.js, style.css, tableau des cas testés et captures datées de la console.

Bilan de la séance

Remplis ce bilan seul, honnêtement : il sert à décider ce qu'il faut reprendre. Niveau : Non maîtrisé, Maîtrise partielle, Bonne maîtrise ou Excellente maîtrise (le vocabulaire des grilles nationales d'évaluation), ou Non évalué.

Compétence du référentiel Ce que j'ai fait dans cette séance Niveau
B1.3 – Développer la présence en ligne de l'organisation
B1.5 – Mettre à disposition des utilisateurs un service informatique

Note

Les codes sont ceux du référentiel.

Je sais faire, sans aide :

  • Lire et modifier le DOM
  • Réagir à un événement
  • Valider un formulaire avec des messages clairs
  • Utiliser la console pour déboguer
  • Expliquer pourquoi le serveur doit contrôler

Ce que je dois reprendre : ______________________

Ma question à poser à l'enseignant : ______________________