Lecture 18: Form Validation

BMC201 - Web Technology

Mr. Prashant Kumar Nag

2026-02-24

Lecture 18

Form Validation

Week 5 | Unit II: DOM Manipulation
BMC201 - Web Technology
Mr. Prashant Kumar Nag, Assistant Professor

Learning Objectives

---

• Validate user input with HTML5 attributes
• Implement client-side validation with JavaScript
• Use regular expressions for pattern matching
• Provide real-time validation feedback
• Prevent form submission with invalid data

Why Validate Forms?

---

• Ensure correct data format
• Improve user experience with instant feedback
• Prevent invalid data from reaching server
• Reduce errors and security risks
• Guide users to complete forms correctly

HTML5 Built-in Validation

---

<input type="email" required>
<input type="number" min="1" max="100">
<input type="text" pattern="[A-Za-z]+" placeholder="Letters only">
<input type="url" placeholder="https://example.com">

Browsers provide automatic validation for these types.

Required Fields

---

<form>
  <input type="text" name="username" required>
  <input type="email" name="email" required>
  <button type="submit">Submit</button>
</form>

The required attribute prevents submission if field is empty.

Pattern Attribute

---

<input type="text" pattern="[0-9]{10}" 
       placeholder="10-digit phone"
       title="Enter exactly 10 digits">

• pattern uses regular expressions
• title shows hint on validation failure

JavaScript Validation: Basics

---

const form = document.querySelector('form');

form.addEventListener('submit', function(e) {
  e.preventDefault();
  validateForm();
});

preventDefault() stops form submission until validation passes.

Validation Function

---

function validateForm() {
  const email = document.getElementById('email').value;
  if (email === '') {
    alert('Email is required');
    return false;
  }
  if (!isValidEmail(email)) {
    alert('Enter valid email');
    return false;
  }
  return true;
}

Email Validation with Regex

---

function isValidEmail(email) {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
}

• ^ start of string
• [^\s@]+ one or more non-space, non-@ chars
• @ literal @
• \. literal dot
• $ end of string

Phone Number Validation

---

function isValidPhone(phone) {
  const regex = /^[0-9]{10}$/;
  return regex.test(phone);
}

This pattern requires exactly 10 digits.

Real-time Validation

---

const emailInput = document.getElementById('email');

emailInput.addEventListener('blur', function() {
  const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.value);
  if (!isValid) {
    this.style.borderColor = 'red';
  } else {
    this.style.borderColor = 'green';
  }
});

blur event fires when user leaves the input field.

Displaying Error Messages

---

const errorDiv = document.querySelector('.error-message');
if (!isValid) {
  errorDiv.textContent = 'Invalid email format';
  errorDiv.style.display = 'block';
}
else {
  errorDiv.textContent = '';
  errorDiv.style.display = 'none';
}

Password Matching

---

function validatePassword() {
  const pwd = document.getElementById('password').value;
  const confirm = document.getElementById('confirm-password').value;
  if (pwd !== confirm) {
    alert('Passwords do not match');
    return false;
  }
  return true;
}

Password Length Check

---

function checkPasswordStrength(pwd) {
  if (pwd.length < 8) {
    return 'Password must be at least 8 characters';
  }
  return 'Valid';
}

Using classList for Error States

---

const input = document.getElementById('username');
if (!isValid) {
  input.classList.add('error');
  input.classList.remove('success');
} else {
  input.classList.add('success');
  input.classList.remove('error');
}

Complete Validation Example

---

const form = document.querySelector('#signup-form');

form.addEventListener('submit', function(e) {
  e.preventDefault();
  const email = document.getElementById('email').value;
  const phone = document.getElementById('phone').value;
  
  if (isValidEmail(email) && isValidPhone(phone)) {
    alert('Form submitted successfully!');
  } else {
    alert('Please fix errors');
  }
});

function isValidEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

Best Practices

---

• Validate on both client and server
• Provide clear error messages
• Highlight invalid fields visually
• Use HTML5 validation when possible
• Test with edge cases (empty, special chars)

Practice Task

---

Create a registration form with:

1. Email validation
2. Phone number (10 digits)
3. Password matching
4. Display error messages in red
5. Prevent submission until all valid

Questions?

Next: Lecture 19 - ES6+ Features