Step 6: A validated contact form

Add a contact form and check it with JavaScript before accepting it. The rules are: a name of at least 2 characters, a valid-looking email, and a message of at least 10 characters. Each field gets its own error message in a role="alert" paragraph so screen readers announce problems, and an invalid class for the red border.

Examplehtml

<style>
:root { --bg: #ffffff; --fg: #1f2330; --accent: #0b6b4a; --card: #f1f3f5; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; line-height: 1.6; background: var(--bg); color: var(--fg); }
header { background: var(--accent); color: #fff; padding: 28px 20px; text-align: center; }
header h1 { margin: 0; font-size: 2rem; }
nav { margin-top: 12px; }
nav a { color: #fff; margin: 0 10px; font-weight: 600; }
main { max-width: 860px; margin: 0 auto; padding: 20px; }
h2 { border-bottom: 3px solid var(--accent); display: inline-block; padding-bottom: 2px; }
footer { text-align: center; padding: 20px; color: #5b6270; }
#projects .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
article { background: var(--card); padding: 16px; border-radius: 10px; border-top: 4px solid var(--accent); }
article h3 { margin-top: 0; }
@media (max-width: 640px) {
  #projects .cards { grid-template-columns: 1fr; }
  nav { display: flex; flex-direction: column; gap: 6px; }
  nav a { margin: 0; }
  header h1 { font-size: 1.6rem; }
}
body.dark { --bg: #14161d; --fg: #e8eaf0; --card: #20232d; --accent: #3ddc97; }
body.dark header { color: #0b0d12; }
body.dark nav a { color: #0b0d12; }
#theme { position: fixed; top: 10px; right: 10px; padding: 6px 12px; border-radius: 6px; border: 0; cursor: pointer; background: #ffffffcc; color: #111; }
form { display: grid; gap: 10px; max-width: 420px; }
label { font-weight: 600; }
input, textarea { padding: 8px; border: 2px solid #8a90a0; border-radius: 6px; font: inherit; background: var(--bg); color: var(--fg); }
input.invalid, textarea.invalid { border-color: #c62828; }
.error { color: #c62828; min-height: 1.2em; margin: 0; }
body.dark .error { color: #ff8a80; }
button.send { background: var(--accent); color: #fff; border: 0; padding: 10px 16px; border-radius: 6px; cursor: pointer; font-weight: 700; }
body.dark button.send { color: #0b0d12; }
</style>
<button id="theme" aria-pressed="false">Dark mode</button>
<header>
  <h1>Ada Lovelace</h1>
  <p>Front-end developer in London</p>
  <nav aria-label="Main">
    <a href="#about">About</a>
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
  </nav>
</header>
<main>
  <section id="about">
    <h2>About me</h2>
    <p>I build fast, friendly websites and I love teaching others how the web works.</p>
  </section>
  <section id="projects">
    <h2>Projects</h2>
    <div class="cards">
    <article><h3>Weather app</h3><p>A small app that shows the forecast.</p></article>
    <article><h3>Recipe finder</h3><p>Search recipes by ingredient.</p></article>
    <article><h3>Quiz game</h3><p>Test your web knowledge.</p></article>
    </div>
  </section>
  <section id="contact">
    <h2>Contact</h2>
    <p>Say hello: ada@example.com, or use the form.</p>
    <form id="contact-form" novalidate>
      <label for="name">Name</label>
      <input id="name" name="name" autocomplete="name">
      <p class="error" id="name-error" role="alert"></p>
      <label for="email">Email</label>
      <input id="email" name="email" type="email" autocomplete="email">
      <p class="error" id="email-error" role="alert"></p>
      <label for="msg">Message</label>
      <textarea id="msg" name="msg" rows="3"></textarea>
      <p class="error" id="msg-error" role="alert"></p>
      <button class="send">Send message</button>
      <p id="status" role="status"></p>
    </form>
  </section>
</main>
<footer><small>&copy; 2026 Ada Lovelace</small></footer>
<script>
var themeBtn = document.getElementById("theme");
function applyTheme(dark) {
  document.body.classList.toggle("dark", dark);
  themeBtn.setAttribute("aria-pressed", String(dark));
  themeBtn.textContent = dark ? "Light mode" : "Dark mode";
}
themeBtn.addEventListener("click", function () {
  applyTheme(!document.body.classList.contains("dark"));
});
function isValidEmail(text) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(text.trim());
}
function check(id, ok, message) {
  var field = document.getElementById(id);
  document.getElementById(id + "-error").textContent = ok ? "" : message;
  field.classList.toggle("invalid", !ok);
  return ok;
}
document.getElementById("contact-form").addEventListener("submit", function (e) {
  e.preventDefault();
  var okName = check("name", document.getElementById("name").value.trim().length >= 2, "Please enter your name.");
  var okEmail = check("email", isValidEmail(document.getElementById("email").value), "Enter a valid email address.");
  var okMsg = check("msg", document.getElementById("msg").value.trim().length >= 10, "Write at least 10 characters.");
  document.getElementById("status").textContent = okName && okEmail && okMsg ? "Thanks! Your message is ready to send." : "";
});
</script>

Open in editor »

Submit the empty form to see the errors, then fill it in. Notice that novalidate turns off the browser's own bubbles so our messages are used, and e.preventDefault() stops the page from reloading.

Your turn: write the code

Write isValidEmail(text) that returns true for text like ada@example.com (something, an @, something, a dot, and at least 2 letters) and false otherwise. Use a regular expression or simple checks. Print the result for ada@example.com, ada@example and no spaces@x.com.

Quick check

Why validate again on the server even though the page checks the form?

Anyone can bypass the browser checksJavaScript is slowBrowsers ignore forms

Finish the quick check (and any code exercise) to complete this lesson, or mark it done yourself.

Tip: use the left and right arrow keys to move between lessons.