Default Behaviors and preventDefault

Event Handling: Form Validation

Imagine trying to open a door without unlocking it first. The door might rattle, but it won’t open because it’s locked. Similarly, in web development, some actions (like submitting a form) have "default behaviors" that occur automatically. As developers, we often need to intercept these behaviors to check whether the "door" is ready to be opened—in other words, whether the form data is valid.

Form validation is an essential part of ensuring users input acceptable data. In this lesson, we'll learn how to validate form inputs, specifically ensuring two password fields match before allowing a form to be submitted. We'll also explore how to use event.preventDefault() to stop a form submission when validation fails.

Validating Passwords Before Submitting a Form

To validate passwords, let’s create a simple signup form with fields for a user’s name, email, password, and a password confirmation. Here’s the basic HTML structure:

This form includes two password fields: one for the user’s password and another to confirm the password. Our goal is to ensure the two passwords match before submitting the form.

Adding Form Validation with JavaScript

Now let’s create a JavaScript file (script.js) to validate the form. We’ll listen for the form’s submit event, check if the passwords match, and use event.preventDefault() to stop the form submission if they don’t.


// script.js
window.addEventListener("DOMContentLoaded", event => {
  // Get the form element
  const form = document.getElementById("signup-form");

  // Function to check if passwords match
  const checkPasswordMatch = event => {
    const passwordValue = document.getElementById("password").value;
    const confirmPasswordValue = document.getElementById("confirm-password").value;

    if (passwordValue !== confirmPasswordValue) {
      // Prevent default form submission behavior
      event.preventDefault();
      alert("Passwords must match!");
    } else {
      alert("The form was submitted successfully!");
    }
  };

  // Listen for the form's submit event and validate passwords
  form.addEventListener("submit", checkPasswordMatch);
});

In this code, the checkPasswordMatch function:

Retrieves the values of the two password fields.
Compares the values to ensure they match.
Uses event.preventDefault() to stop the form submission if they don’t match.
Alerts the user with feedback, either notifying them of an issue or confirming successful submission.

Understanding `preventDefault()`

The preventDefault() method is like a stop sign for default browser behaviors. It tells the browser, "Wait, don’t execute the default action for this event because I need to handle it first."

Analogy: Imagine you’re at a traffic light. Normally, when the light turns green, cars start moving (default behavior). But if there’s a traffic officer waving to stop, drivers will wait until the officer gives the go-ahead. Similarly, preventDefault() stops the browser’s default action, letting you decide when (or if) to proceed.

Real-World Applications

Form validation with preventDefault() has many practical uses, such as:

Preventing empty or invalid fields from being submitted.
Ensuring passwords meet complexity requirements (e.g., length, special characters).
Validating email addresses or phone numbers using regular expressions.

Here’s an extended example that checks both password match and email format:


window.addEventListener("DOMContentLoaded", event => {
  const form = document.getElementById("signup-form");

  const validateForm = event => {
    const email = document.getElementById("email").value;
    const password = document.getElementById("password").value;
    const confirmPassword = document.getElementById("confirm-password").value;

    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    if (!emailRegex.test(email)) {
      event.preventDefault();
      alert("Please enter a valid email address.");
    } else if (password !== confirmPassword) {
      event.preventDefault();
      alert("Passwords must match!");
    } else {
      alert("The form was submitted successfully!");
    }
  };

  form.addEventListener("submit", validateForm);
});

Key Takeaways

Form validation prevents invalid data from being submitted to the server.
preventDefault() stops default actions like form submissions or link navigation.
Front-end validation improves user experience by providing immediate feedback.