javascript · level 2 · unit 4 · lesson 3
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
checks every answer before your code trusts it.
People leave boxes empty, type only spaces or spell things oddly. Validation means checking every answer before you use it, and kindly telling the person what to fix.
A keeps it tidy. Put an if near the top of the listener. If an answer is wrong, show a message and return. The listener stops there, so the code below only ever sees good answers.
Show the message by setting hidden = false on a ready-made element, and hide it again when all is well.
<form id="join">
<input id="username" placeholder="Pick a username">
<button>Join</button>
</form>
<p id="problem" hidden>Usernames need at least 3 letters.</p>
<p id="welcome"></p>const username = document.querySelector("#username");
const problem = document.querySelector("#problem");
document.querySelector("#join").addEventListener("submit", (event) => {
event.preventDefault();
const picked = username.value.trim();
if (picked.length < 3) { problem.hidden = false; return; }
problem.hidden = true;
document.querySelector("#welcome").textContent = `Welcome, ${picked}!`;
});Press run it to bring the page to life.
console
nothing logged yet
Strings have .includes() too, like arrays: "sam@example.com".includes("@") is true.
guess first
Only spaces are typed, then Post is pressed. What shows?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<form id="note">
<input id="message" placeholder="Leave a note">
<button>Post</button>
</form>
<p id="warning" hidden>Write something first!</p>
<p id="board"></p>const message = document.querySelector("#message");
document.querySelector("#note").addEventListener("submit", (event) => {
event.preventDefault();
if (message.value.trim() === "") {
document.querySelector("#warning").hidden = false;
return;
}
document.querySelector("#board").textContent = message.value;
});your turn
Your turn. Guard the rollercoaster.
Choose the youngest age allowed on the ride, at least 3. Then type the keyword that stops the listener early. Press run, type 2 and press the button.
the page your code works on
<form id="ride">
<input id="age" type="number" placeholder="Your age">
<button>Get on the ride</button>
</form>
<p id="too-young" hidden>Sorry, you are too young for this ride.</p>
<p id="seat"></p>your javascript
Press run it to bring the page to life.
console
nothing logged yet
- age 2 sees the sorry messagenot checked yet
- age 2 does not get a seatnot checked yet
fix it
Good emails are turned away. Fix it!
the page your code works on
<form id="sign">
<input id="email" placeholder="you@example.com">
<button>Sign up</button>
</form>
<p id="oops" hidden>That email needs an @ sign.</p>
<p id="done"></p>your javascript
Press run it to bring the page to life.
console
nothing logged yet
- a good email sees no warningnot checked yet
- a good email gets the welcome linenot checked yet
- Read the
ifout loud. When does it show the warning? - The guard should catch emails that do not include an @ sign. JavaScript has a symbol meaning not.
- Put ! in front of email.value.includes("@") on line 4, then press run.
nailed it
your forms only trust good answers. :D
- Validation checks answers before your code uses them.
- A guard clause shows a message and stops with
return. hidden = falseshows a ready-made warning.
new words in your collection
- validation
- guard clause
This lesson isn’t saved. A free account remembers every lesson you finish.