Day 1: Form Validation with JavaScript

Daily Objective

Intercept form submissions with preventDefault() and display custom error messages in the UI.

1. Form Validation Pattern

const form = document.querySelector('#signup-form');
form.addEventListener('submit', e => {
  e.preventDefault();
  const emailInput = document.querySelector('#email');
  const errorSpan = document.querySelector('#email-error');

  if (!emailInput.value.includes('@')) {
    errorSpan.textContent = 'Please enter a valid email address.';
    emailInput.classList.add('is-invalid');
  } else {
    errorSpan.textContent = '';
    emailInput.classList.remove('is-invalid');
  }
});

Daily Hands-on Practice (70%)

1. Build a registration form validating passwords for minimum 8 characters and matching confirmations.