JavaScript Simplified · One concept, one day, one project · Day 20 of 32

Form Validation

Checking that what a user typed makes sense, and telling them clearly when it does not. You build a signup validator with real error messages.

By the end of today you can

Check for empty fields before accepting a form
Do a simple email check and a password length check
Show clear error messages next to the problem
Build a signup form validator

Users make mistakes: a blank field, a typo in an email, a password that is far too short. Validation is checking the input before you trust it, and telling the user kindly what to fix. It is what separates a toy form from a real one.

1. Checking for Empty Fields

The most common problem is a blank field. A value that is an empty string means nothing was typed.

What this code doestrim() removes spaces from the ends, so a field with only spaces still counts as empty. A small check that catches a very common mistake.

app.js

function isEmpty(value) {
  // trim removes spaces at the ends, so "   " counts as empty
  return value.trim() === "";
}
console.log(isEmpty(""));      // true
console.log(isEmpty("   "));   // true
console.log(isEmpty("Ada"));   // false

OUTPUT   TERMINAL

➜ webbo3 node app.js
true
true
false

2. Email and Password Checks

A full email check is complex, but a simple, honest one asks: is there an @ and a dot? For a password, the simplest useful rule is a minimum length.

What this code doesincludes from Week 3 checks for an @ and a dot. .length checks the password is at least six characters. Simple, clear rules a beginner can trust.

app.js

function looksLikeEmail(value) {
  return value.includes("@") && value.includes(".");
}
function longEnough(value) {
  return value.length >= 6;
}
console.log(looksLikeEmail("[email protected]")); // true
console.log(looksLikeEmail("ada-at-mail"));  // false
console.log(longEnough("12345"));            // false, too short
console.log(longEnough("secret1"));          // true

OUTPUT   TERMINAL

➜ webbo3 node app.js
true
false
false
true

3. Showing Error Messages

A good form does not just refuse; it says what is wrong, next to the field. The pattern: check each field, collect any problems, and show them.

What this code doesSubmitting with a short password shows a clear error.

index.html

<form id="signup">
  <input id="email" placeholder="Email" value="[email protected]">
  <input id="pass" placeholder="Password" value="123">
  <button type="submit">Sign up</button>
</form>
<p id="error"></p>

style.css

1
2

input{display:block;margin:6px 0;padding:8px;width:220px}
#error{color:#b3261e;font-weight:bold}

app.js

document.getElementById("signup").addEventListener("submit", function (event) {
  event.preventDefault();
  const email = document.getElementById("email").value;
  const pass = document.getElementById("pass").value;
  const error = document.getElementById("error");

  if (email.trim() === "" || pass.trim() === "") {
    error.textContent = "Please fill in both fields.";
  } else if (!email.includes("@")) {
    error.textContent = "That email does not look right.";
  } else if (pass.length < 6) {
    error.textContent = "Password must be at least 6 characters.";
  } else {
    error.textContent = "";
    error.style.color = "#0a6e6e";
    error.textContent = "Signed up successfully!";
  }
});

BROWSERindex.html  ·  after submitting with a 3-character password

The password "123" is too short, so the checks fall through to the length rule and show its message. Fix the password and the same form would show success. The order of checks matters: empty first, then shape, then length.

Today’s Mini Project

🔐 Signup Form Validator

The page above is your project: a signup form that checks for empty fields, a sensible email and a long enough password, and shows a clear message for each problem, or success when all is well.

Challenge (15 minutes)

Add a "confirm password" field and an error when it does not match the password. Expected: mismatched passwords show "Passwords do not match."

Try This

Change the minimum password length to 8 and test with a 6-character password.

Expected: the 6-character password is now refused with the length message.

Picture This

You have finished Layer 3’s final piece. Your pages now take input, check it, and respond with care. That is a complete conversation with the user. Next week you make your JavaScript more modern and expressive.

Checkpoint

Why use trim() when checking for an empty field?

Because a field with only spaces is really empty to a user. trim() removes the spaces at the ends, so " " is caught as empty.

What is a simple, honest email check for a beginner?

Check that the value includes an @ and a dot. It is not perfect, but it catches obvious mistakes and is easy to understand.

Why does the order of validation checks matter?

Because you show the first problem found. Checking empty first, then shape, then length gives the most sensible message, rather than complaining about length on a blank field.

Tick Before You Move On

☐ I can catch empty fields, including spaces, with trim
☐ I can do a simple email check and a password length check
☐ I can show a clear error message for each problem
☐ I built the Signup Form Validator

Quick Recap

Validation checks input before you trust it, and guides the user. trim catches blank and spaces-only fields. A simple email check looks for @ and a dot; a password check uses length. Show the first problem clearly, in a sensible order.

Next: Day 21, and a new layer: modern JavaScript. You start with scope, understanding where a variable can and cannot be reached.

Form Validation

1. Checking for Empty Fields

2. Email and Password Checks

3. Showing Error Messages

Today’s Mini Project

Checkpoint

Learn this with a real instructor