Lesson 9: Form Validation

Learning Goals

• Capture form submit event.
• Check if fields are valid.
• Prevent submit when input is wrong.

Example

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

form.addEventListener("submit", function (event) {
  if (!emailInput.value.includes("@")) {
    event.preventDefault();
    alert("Enter a valid email");
  }
});

Practice

1. Require username to be at least 3 characters.
2. Require password to be at least 6 characters.
3. Show custom messages under each field.

Homework

Create a registration form that validates name, email, and password before submitting.

let form = document.getElementById("registerForm");
let nameInput = document.getElementById("name");
let emailInput = document.getElementById("email");
let passwordInput = document.getElementById("password");

form.addEventListener("submit", function (event) {
  if (nameInput.value.length < 2 || !emailInput.value.includes("@") || passwordInput.value.length < 6) {
    event.preventDefault();
    alert("Please complete the form correctly");
  }
});