✅ Form Validation using JavaScript

Form validation checks user input before submission.

🧠 Why Form Validation Matters

Without validation 
• Empty forms get submitted
• Wrong emails stored
• Bad data in database

Real examples 
• Email format check
• Password rules
• Required fields

🔍 Types of Form Validation

🔹 1. HTML Validation (Built-in) 
Browser handles validation automatically. 
Example <input type="email" required> 
✔️ Checks empty field 
✔️ Checks email format 

🔹 2. JavaScript Validation (Custom Logic) 
You control validation rules. 

Used for 
• Password strength
• Custom messages
• Complex conditions

📤 Basic Form Validation Flow 
1️⃣ User submits form 
2️⃣ JavaScript checks input 
3️⃣ If invalid → show error 
4️⃣ If valid → submit form 

✍️ Check Empty Input 
HTML 

<form id="form">
    <input type="text" id="username">
    <button>Submit</button>
</form>

 
JavaScript 

const form = document.getElementById("form");
form.addEventListener("submit", (e) => {
    const username = document.getElementById("username").value;
    if (username === "") {
        e.preventDefault();
        alert("Username is required");
    }
});

 
✔️ Stops submission if empty 

📧 Email Validation Example 
Check using pattern. 

const email = document.getElementById("email").value;
if (!email.includes("@")) {
    alert("Enter valid email");
}

 
Real projects use regular expressions. 

🔐 Password Length Validation 

if (password.length < 6) {
    alert("Password must be at least 6 characters");
}

 

🎨 Show Error Message in UI (Better Practice) 
HTML 

<input type="text" id="username">
<p id="error"></p>

 
JavaScript 

if (username === "") {
    error.textContent = "Username required";
}

 
✔️ Better than alert 
✔️ User-friendly 

⚠️ Common Beginner Mistakes 
• Forgetting preventDefault()
• Using only alerts
• No user feedback
• Weak validation rules

✅ Best Practices 
• Validate on both client and server
• Show clear error messages
• Use simple rules first
• Give instant feedback

🧪 Mini Practice Task 
• Validate username is not empty
• Check email contains @
• Ensure password length ≥ 6
• Show error message on screen

✅ Mini Practice Task Solution – Try it yourself first

This solution covers all 4 tasks: 
✔ Username not empty 
✔ Email contains @ 
✔ Password length ≥ 6 
✔ Show error message on screen 

📝 HTML 

<form id="form">
    <input type="text" id="username" placeholder="Enter username">
    <input type="text" id="email" placeholder="Enter email">
    <input type="password" id="password" placeholder="Enter password">
    <p id="error" style="color: red;"></p>
    <button type="submit">Submit</button>
</form>

 

⚡ JavaScript 

const form = document.getElementById("form");
const error = document.getElementById("error");
form.addEventListener("submit", (e) => {
    const username = document.getElementById("username").value.trim();
    const email = document.getElementById("email").value.trim();
    const password = document.getElementById("password").value.trim();
    error.textContent = ""; // clear previous errors
    // Username validation
    if (username === "") {
        e.preventDefault();
        error.textContent = "Username is required";
        return;
    }
    // Email validation
    if (!email.includes("@")) {
        e.preventDefault();
        error.textContent = "Enter a valid email";
        return;
    }
    // Password validation
    if (password.length < 6) {
        e.preventDefault();
        error.textContent = "Password must be at least 6 characters";
        return;
    }
});

 

✅ What this code does 
• Stops form submission if input is invalid
• Shows error message on screen
• Validates step by step
• Clears old errors automatically

🧠 Key Learning 
• Use preventDefault() to stop submission
• Use .trim() to remove extra spaces
• Show errors in UI instead of alerts
• Validate fields one by one

Double Tap ♥️ For More