Lesson 7: Form Events and Validation

Learning Objectives

By the end of this lesson, learners will be able to:

• Handle form submissions using JavaScript
• Prevent default browser behavior (such as page reload)
• Validate user input when a form is submitted
• Display helpful error messages and feedback
• Build a simple, interactive form with client-side validation

Why This Matters

Forms are one of the most common features on the web — used for:

• Logging in
• Contacting someone
• Signing up
• Searching and filtering

JavaScript helps make forms smarter and user-friendly, by validating input before it’s sent, showing live feedback, and improving user experience.

1. Handling Submit Events on Forms

Instead of adding a click listener to a submit button, it’s better to listen for the submit event on the whole form.

Example:

<form id="my-form">
  <input type="text" id="username" />
  <button type="submit">Send</button>
</form>

let form = document.getElementById("my-form");

form.addEventListener("submit", function(event) {
  // Your code goes here
});

This will run whenever the user clicks the submit button or presses Enter inside a field.

2. Preventing Page Reload

By default, submitting a form will reload the page. To stop that, use:

event.preventDefault();

This lets you handle the submission entirely in JavaScript.

Example:

form.addEventListener("submit", function(event) {
  event.preventDefault();
  console.log("Form submitted!");
});

3. Showing Error Messages (Input Validation)

You should validate the input fields before using or sending the data.

Common Validations:

• Check if required fields are filled in
• Make sure email addresses look valid
• Ensure numbers are within limits

Example Validation:

let username = document.getElementById("username");

form.addEventListener("submit", function(event) {
  event.preventDefault();

  let name = username.value.trim();

  if (name === "") {
    alert("Please enter your username.");
  } else {
    alert("Hello, " + name + "!");
  }
});

Best Practice: Show Feedback in the Page (Not alert())

Instead of using alert(), show feedback in a visible element on the page.

Example:

HTML:

<form id="signup-form">
  <input type="text" id="name" placeholder="Your name" />
  <button type="submit">Submit</button>
  <p id="feedback"></p>
</form>

JavaScript:

let form = document.getElementById("signup-form");
let nameInput = document.getElementById("name");
let feedback = document.getElementById("feedback");

form.addEventListener("submit", function(event) {
  event.preventDefault();
  let name = nameInput.value.trim();

  if (name === "") {
    feedback.textContent = "Name is required.";
    feedback.style.color = "red";
  } else {
    feedback.textContent = "Welcome, " + name + "!";
    feedback.style.color = "green";
  }
});

Practice Challenge

HTML:

<form id="email-form">
  <input type="email" id="email" placeholder="Enter your email" />
  <button type="submit">Subscribe</button>
  <p id="email-feedback"></p>
</form>

JavaScript Task:

• Prevent form submission from reloading the page
• Check if the email field is empty
• Show a red error message if empty
• Show a green success message if valid

Example Code:

let form = document.getElementById("email-form");
let emailInput = document.getElementById("email");
let feedback = document.getElementById("email-feedback");

form.addEventListener("submit", function(event) {
  event.preventDefault();

  let email = emailInput.value.trim();

  if (email === "") {
    feedback.textContent = "Please enter your email.";
    feedback.style.color = "red";
  } else {
    feedback.textContent = "Thanks for subscribing!";
    feedback.style.color = "green";
  }
});

Summary