Loading...

JavaScript Form Validation

The same tea slip is back. The form is #slip, the text field is #guest, the number field is #cups, and the button #send is type="submit". #note starts as blank.
Reading a value is not the same as accepting it. This page still calls preventDefault so the browser stays here, then it decides. A guest name with the spaces trimmed away must not be empty. The cup count must be a number from 1 to 3. Anything else is refused. lida and 2 are accepted, and the note becomes ok. The page clicks send while the guest is still empty, then fills the fields and clicks send again. The line reads need guest / ok.

Not the previous slip

The previous page stored lida and the string 2 and wrote lida / 2 / stayed. It did not ask whether the order was allowed. An empty guest would still have been sent. This page uses the same form and the same button, and it answers a different question: may this order stand?
The check looks at the guest first. If that name is empty, the cups are not judged yet. Only a real name reaches the cup test. Number("") is 0, which is outside 1 to 3, but you never want “need cups” when the person forgot their name.

What the note may say

The note starts as blank. The button still says send. Each snippet starts from an empty slip, except the page row.

📊 What the note may say

What was typed Note text Easy to mix up
guest empty, cups 2 need guest writing need cups
guest lida, cups 9 need cups writing ok
guest lida, cups 2 ok the old line lida / 2 / stayed
guest lida, cups 0 need cups treating 0 as “no cups, so skip”
page, two clicks need guest / ok a single word ok

trim removes spaces at the ends of the name. A guest of three spaces is still empty after trim. Number turns the cup text into a number so >= and <= compare numbers, not strings. The field still stores text. The conversion happens only inside the check.
The function returns as soon as one rule fails. Later lines do not run. That is why an empty guest never reaches the cup test.

Three words, nothing else

The note is never the guest’s name and never the cup count. It is only need guest, need cups, or ok. The previous page put lida and 2 into the note. This page does not.

Guest before cups

The name is judged first. If it is empty, the function writes need guest and returns. The cups can be 2 and they still do not matter.

Refuse an empty guest

javascript 
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);

The log is need guest. The spaces were trimmed to nothing, so the name does not count. Cups were 2 and were never tested.

Nine cups

Fresh slip. The guest is lida. The cups are 9, which is above 3.

Refuse nine cups

javascript 
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);

The log is need cups. The name passed. The count did not. 1 and 3 would pass this test. 0 and 4 would not.

A good order

Fresh slip again. The guest is lida and the cups are 2. Both rules pass, so the note becomes ok.

Accept two cups

javascript 
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);

The log is ok. Nothing was written about staying on the page. The previous line lida / 2 / stayed belongs to the page that only read the fields.

The line under the slip

The script sits at the end of the body. The listener calls preventDefault, then the same check. The first click happens while the guest is empty, and that note is pushed. Then the script fills lida and 2 and clicks send again. The line joins the two notes.

Page demo — checked slip

html 
<!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>

The line reads need guest / ok. The first click found an empty name. The second click found lida and 2. The note ends as ok. The word blank is gone. lida / 2 / stayed is the previous page.

At the counter

  1. Leave the guest blank, set cups to 2, and run the check. The note is need guest.
  2. Set the guest to lida and the cups to 9. The note is need cups.
  3. Set the cups to 2. The note is ok.
  4. Read the page line: need guest / ok.

Misses at the counter

The button still says send. The note is one of three words: need guest, need cups, or ok.

  • Writing ok while the guest is still empty
  • Judging the cups before the name, so an empty guest becomes need cups
  • Forgetting trim, so three spaces pass as a name
  • Comparing cups.value as text and expecting >= to understand “numbers”
  • Reading the line as lida / 2 / stayed
  • Stopping after the first click and missing ok

Keep this

  • An empty guest, including spaces only, writes need guest and stops
  • Cups outside 1 to 3 write need cups
  • lida with 2 writes ok
  • The guest is checked before the cups
  • The page line reads need guest / ok

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
6
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 54 of 55
Javascript Tutorial