Complete Web Designing Course for Beginners

Lesson 2.5 – Form Validation Basics

🔒 Preventing Incorrect Data Entry in HTML Forms

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand Form Validation

✅ Understand why validation is important

✅ Use Required Fields

✅ Restrict Input Length

✅ Validate Email Addresses

✅ Validate Numbers

✅ Use Placeholder Text

✅ Create Professional Forms

📖 Introduction

Imagine a College Admission Form.

Student enters:

Name: _________

Email: abc

Mobile: 123

Is this valid information?

❌ No

Problems:

Name is empty
Email is incorrect
Mobile number is too short

To solve this problem websites use:

✅ Form Validation

Validation checks whether the entered information is correct before submission.

🤔 What is Form Validation?

Form Validation is the process of checking user input before accepting it.

Real Life Examples

Registration Form

Checks:

Username entered?
Password entered?

Admission Form

Checks:

Student Name
Email
Mobile Number

Login Form

Checks:

Username
Password

🌟 Why Validation is Important?

Without Validation:

❌ Wrong Data

❌ Fake Information

❌ Empty Fields

❌ System Errors

With Validation:

✅ Correct Information

✅ Better User Experience

✅ Professional Forms

🎯 Required Attribute

The most common validation.

Makes a field mandatory.

Syntax

<input type="text" required>

Example

<label>Name:</label>

<input
type="text"
required>

Result

If empty:

Browser displays an error.

Form cannot be submitted.

Example Program

<form>

<label>Name:</label>

<input
type="text"
required>

</form>

Output

Student must enter a name.

🌟 Placeholder Attribute

Provides guidance to users.

Example

<input
type="text"
placeholder="Enter Your Name">

Output

[Enter Your Name]

appears inside the field.

Why Use Placeholder?

Helps users understand:

What information should be entered.

Example

<input
type="email"
placeholder="student@gmail.com">

🎯 Email Validation

Using:

type="email"

automatically validates email format.

Example

<input
type="email"
required>

Valid Email

student@gmail.com

✅ Accepted

Invalid Email

studentgmail.com

❌ Rejected

Example Program

<label>Email:</label>

<input
type="email"
required>

🌟 Number Validation

Using:

type="number"

Example

<input
type="number">

Output

Only numbers allowed.

Example

<label>Age:</label>

<input
type="number"
min="18"
max="60">

Meaning

Allowed Age:

18 to 60

🎯 Min Attribute

Defines minimum value.

Example

<input
type="number"
min="1">

Result

Cannot enter value below 1.

🎯 Max Attribute

Defines maximum value.

Example

<input
type="number"
max="100">

Result

Cannot exceed 100.

Example

<input
type="number"
min="1"
max="100">

🌟 Minlength Attribute

Defines minimum character length.

Example

<input
type="text"
minlength="3">

Valid

Rahul

Invalid

Ra

Too short.

🌟 Maxlength Attribute

Defines maximum character length.

Example

<input
type="text"
maxlength="20">

Result

Maximum 20 characters.

Example

<label>Name:</label>

<input
type="text"
minlength="3"
maxlength="30">

🎯 Pattern Attribute

Used for custom validation.

Example

Mobile Number Validation

<input
type="tel"
pattern="[0-9]{10}">

Meaning

Exactly 10 digits

Required.

Valid

9876543210

✅ Accepted

Invalid

❌ Rejected

🌟 Readonly Attribute

User can view data but cannot modify it.

Example

<input
type="text"
value="Computer Science"
readonly>

Output

Student can see it.

Cannot edit it.

🌟 Disabled Attribute

Completely disables field.

Example

<input
type="text"
value="Disabled"
disabled>

Output

Greyed field.

Cannot be used.

🎯 Complete Validation Example

<!DOCTYPE html>

<html>

<head>

<title>Validation Example</title>

</head>

<body>

<h1>Student Registration Form</h1>

<form>

<label>Name:</label>

<br>

<input
type="text"
required
minlength="3"
maxlength="30">

<br><br>

<label>Email:</label>

<br>

<input
type="email"
required>

<br><br>

<label>Age:</label>

<br>

<input
type="number"
min="18"
max="60">

<br><br>

<label>Mobile Number:</label>

<br>

<input
type="tel"
pattern="[0-9]{10}"
required>

<br><br>

<input
type="submit">

</form>

</body>

</html>

🎯 Expected Output

Form with:

✅ Required Name

✅ Valid Email

✅ Age Limit

✅ 10 Digit Mobile Number

🏫 Real World Example – College Admission Form

<form>

<label>Student Name:</label>

<input
type="text"
required>

<br><br>

<label>Email:</label>

<input
type="email"
required>

<br><br>

<label>Mobile Number:</label>

<input
type="tel"
pattern="[0-9]{10}"
required>

</form>

🌟 Validation Flow

Student Enters Data

↓

Browser Checks Rules

↓

Valid Data?

↓

Yes → Submit Form

↓

No → Show Error

⚠️ Common Beginner Mistakes

Mistake 1

Not Using Required Fields

Wrong:

<input type="text">

Better:

<input
type="text"
required>

Mistake 2

Using Text Instead of Email

Wrong:

<input
type="text">

Correct:

<input
type="email">

Mistake 3

No Mobile Validation

Wrong:

<input
type="tel">

Better:

<input
type="tel"
pattern="[0-9]{10}">

🌟 Best Practices

✅ Use required fields.

✅ Validate email addresses.

✅ Validate mobile numbers.

✅ Use placeholders.

✅ Restrict input length.

✅ Use min and max values.

🏆 Mini Project – Validated Registration Form

Create:

Student Name

Required

Email

Required

Mobile Number

10 Digits

Age

18–60

Branch

Dropdown Menu

📝 Practical Activity

Create a form containing:

✅ Name

✅ Email

✅ Mobile Number

✅ Age

✅ Address

Apply:

required
minlength
maxlength
min
max

Run it in Chrome Browser.

📋 Assignment

Assignment 2.5

What is Form Validation?
Why is validation important?
What does the required attribute do?
What is minlength?
What is maxlength?
What is the purpose of min and max?
Create a validated registration form.

🧠 Quiz

Q1. Which attribute makes a field mandatory?

A. validate

B. must

C. required

D. compulsory

✅ Answer: C

Q2. Which input type validates email format?

A. text

B. mail

C. email

D. url

✅ Answer: C

Q3. Which attribute sets minimum characters?

A. min

B. minlength

C. max

D. maxlength

✅ Answer: B

Q4. Which attribute sets maximum characters?

A. maxlength

B. minlength

C. max

D. size

✅ Answer: A

Q5. Which attribute is used for custom validation?

A. validate

B. pattern

C. check

D. rule

✅ Answer: B

📌 Lesson Summary

✅ Form Validation ensures correct user input.

✅ required makes fields mandatory.

✅ email validates email addresses.

✅ min and max restrict numeric values.

✅ minlength and maxlength control text length.

✅ pattern creates custom validation rules.

✅ Validation improves accuracy and professionalism.