Validation de formulaire
Le même bon de thé est de retour. Le formulaire est #slip, le champ texte #guest, le champ nombre #cups, et le bouton #send a type="submit". #note commence par blank.
Lire une valeur n’est pas l’accepter. La page appelle encore preventDefault pour que le navigateur reste ici, puis elle décide. Le nom, après trim, ne doit pas être vide. Les tasses doivent être un nombre de 1 à 3. Le reste est refusé. lida et 2 sont acceptés et la note devient ok. La page clique sur send pendant que le nom est vide, puis remplit les champs et clique encore. La ligne devient need guest / ok.
Pas le bon précédent
La page précédente a stocké lida et le texte 2 et a écrit lida / 2 / stayed. Elle n’a pas demandé si la commande était permise. Un invité vide aurait quand même été envoyé. Cette page utilise le même formulaire et le même bouton et répond à une autre question : cette commande tient-elle ?
Le contrôle regarde d’abord l’invité. Si le nom est vide, les tasses ne sont pas encore jugées. Number("") vaut 0, hors de 1 à 3, mais un nom oublié ne doit pas donner need cups.
Ce que la note peut dire
La note commence par blank. Le bouton dit encore send. Chaque extrait part d’un bon vide, sauf la ligne de la page.
📊 Ce que la note peut dire
| Ce qui a été saisi | Texte de la note | Facile à confondre |
|---|---|---|
| invité vide, 2 tasses | need guest | écrire need cups |
| invité lida, 9 tasses | need cups | écrire ok |
| invité lida, 2 tasses | ok | l’ancienne ligne lida / 2 / stayed |
| invité lida, 0 tasse | need cups | prendre 0 pour « pas de tasses, on passe » |
| page, deux clics | need guest / ok | le seul mot ok |
trim enlève les espaces aux bouts du nom. Trois espaces restent vides après trim. Number transforme le texte des tasses en nombre pour que >= et <= comparent des nombres, pas des textes. Le champ garde du texte. La conversion n’a lieu que dans le contrôle.
La fonction revient dès qu’une règle échoue. Les lignes suivantes ne s’exécutent pas. Un invité vide n’atteint donc jamais le test des tasses.
Trois mots, rien d’autre
La note n’est jamais le nom ni le nombre de tasses. Seulement need guest, need cups ou ok. La page précédente mettait lida et 2 dans la note. Celle-ci ne le fait pas.
L’invité avant les tasses
Le nom est jugé en premier. S’il est vide, la fonction écrit need guest et revient. Les tasses peuvent valoir 2 et ne comptent toujours pas.
let slip = document.getElementById("slip");
let note = document.getElementById("note");
function check() {
let guest = slip.elements.guest.value.trim();
let cups = Number(slip.elements.cups.value);
if (guest === "") {
note.textContent = "need guest";
return;
}
if (!(cups >= 1 && cups <= 3)) {
note.textContent = "need cups";
return;
}
note.textContent = "ok";
}
slip.elements.guest.value = " ";
slip.elements.cups.value = "2";
check();
console.log(note.textContent);
Le journal est need guest. Les espaces sont devenus rien, le nom ne compte pas. Les tasses étaient à 2 et n’ont pas été testées.
Neuf tasses
Nouveau bon. L’invité est lida. Les tasses sont à 9, donc au-dessus de 3.
let slip = document.getElementById("slip");
let note = document.getElementById("note");
function check() {
let guest = slip.elements.guest.value.trim();
let cups = Number(slip.elements.cups.value);
if (guest === "") {
note.textContent = "need guest";
return;
}
if (!(cups >= 1 && cups <= 3)) {
note.textContent = "need cups";
return;
}
note.textContent = "ok";
}
slip.elements.guest.value = "lida";
slip.elements.cups.value = "9";
check();
console.log(note.textContent);
Le journal est need cups. Le nom a passé, le nombre non. 1 et 3 passeraient. 0 et 4 non.
Une commande valable
Encore un nouveau bon. Invité lida, tasses 2. Les deux règles passent, la note devient ok.
let slip = document.getElementById("slip");
let note = document.getElementById("note");
function check() {
let guest = slip.elements.guest.value.trim();
let cups = Number(slip.elements.cups.value);
if (guest === "") {
note.textContent = "need guest";
return;
}
if (!(cups >= 1 && cups <= 3)) {
note.textContent = "need cups";
return;
}
note.textContent = "ok";
}
slip.elements.guest.value = "lida";
slip.elements.cups.value = "2";
check();
console.log(note.textContent);
Le journal est ok. Rien n’a été écrit sur le fait de rester sur la page. La ligne précédente lida / 2 / stayed appartient à la page qui ne faisait que lire les champs.
La ligne sous le bon
Le script est à la fin de body. L’écouteur appelle preventDefault, puis le même contrôle. Le premier clic a lieu avec un invité vide, et cette note est gardée. Ensuite le script met lida et 2 et clique encore sur send. La ligne réunit les deux notes.
<!DOCTYPE html>
<html>
<head>
<title>tea-slip — page</title>
</head>
<body>
<form id="slip">
<input id="guest" name="guest" type="text">
<input id="cups" name="cups" type="number">
<button id="send" type="submit">send</button>
</form>
<p id="note">blank</p>
<p id="line">…</p>
<script>
let slip = document.getElementById("slip");
let note = document.getElementById("note");
let seen = [];
function check() {
let guest = slip.elements.guest.value.trim();
let cups = Number(slip.elements.cups.value);
if (guest === "") {
note.textContent = "need guest";
return;
}
if (!(cups >= 1 && cups <= 3)) {
note.textContent = "need cups";
return;
}
note.textContent = "ok";
}
slip.addEventListener("submit", function (event) {
event.preventDefault();
check();
seen.push(note.textContent);
});
document.getElementById("send").click();
slip.elements.guest.value = "lida";
slip.elements.cups.value = "2";
document.getElementById("send").click();
document.getElementById("line").textContent = seen.join(" / ");
</script>
</body>
</html>
La ligne est need guest / ok. Le premier clic a trouvé un nom vide. Le second a trouvé lida et 2. La note finit sur ok. Le mot blank a disparu. lida / 2 / stayed est la page précédente.
Au comptoir
- Laisse l’invité vide, mets les tasses à 2 et lance le contrôle. La note est need guest.
- Mets l’invité à lida et les tasses à 9. La note est need cups.
- Mets les tasses à 2. La note est ok.
- Lis la ligne de la page : need guest / ok.
Ratés au comptoir
Le bouton dit encore send. La note est l’un de trois mots : need guest, need cups ou ok.
- Écrire ok alors que l’invité est encore vide
- Juger les tasses avant le nom, si bien qu’un invité vide devient need cups
- Oublier
trim, et laisser passer trois espaces comme nom - Comparer
cups.valuecomme texte en attendant que>=comprenne les « nombres » - Lire la ligne comme lida / 2 / stayed
- S’arrêter après le premier clic et manquer ok
À retenir
- Un invité vide, même fait seulement d’espaces, écrit need guest et s’arrête
- Des tasses hors de 1 à 3 écrivent need cups
- lida avec 2 écrit ok
- L’invité est contrôlé avant les tasses
- La ligne de la page est need guest / ok
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut