Day 66 – Web: Client-Side Validation using JavaScript

Concept Notes (Deep Explanation + Examples)

🔹 What is Client-Side Validation?

Client-side validation means checking user input before it is sent to the server, using JavaScript or similar technologies (like HTML5 attributes).
It happens in the browser — ensuring the form data is complete, correct, and secure before submission.

Example:
When a user forgets to enter an email or types an invalid one, JavaScript immediately shows an error — without reloading the page.

🔹 Why Validation is Needed

• To prevent incorrect or incomplete data from being sent.
• To improve user experience (instant feedback).
• To reduce server load by catching errors early.
• To improve security by filtering suspicious input.

🔹 Types of Form Validation

1️⃣ Client-side Validation — Done using JavaScript (on browser).
2️⃣ Server-side Validation — Done on the backend (PHP, Node.js, etc.) after data submission.

For ECET, focus mainly on Client-Side Validation using JavaScript.

🔹 Example Scenario

Imagine a registration form where a user must enter:

• Name
• Email
• Password

We can use JavaScript to check:
✅ Name is not empty
✅ Email contains “@”
✅ Password length ≥ 6 characters

🔹 Example Code

<form onsubmit="return validateForm()">
  <label>Name:</label>
  <input type="text" id="name"><br>
  
  <label>Email:</label>
  <input type="text" id="email"><br>
  
  <label>Password:</label>
  <input type="password" id="password"><br>
  
  <input type="submit" value="Register">
</form>

<script>
function validateForm() {
  let name = document.getElementById("name").value;
  let email = document.getElementById("email").value;
  let password = document.getElementById("password").value;
  
  if (name == "") {
    alert("Name cannot be empty!");
    return false;
  }
  
  if (!email.includes("@")) {
    alert("Enter a valid email address!");
    return false;
  }
  
  if (password.length < 6) {
    alert("Password must be at least 6 characters long!");
    return false;
  }
  
  alert("Form Submitted Successfully!");
  return true;
}
</script>

<form onsubmit="return validateForm()">
  <label>Name:</label>
  <input type="text" id="name"><br>
  
  <label>Email:</label>
  <input type="text" id="email"><br>
  
  <label>Password:</label>
  <input type="password" id="password"><br>
  
  <input type="submit" value="Register">
</form>

<script>
function validateForm() {
  let name = document.getElementById("name").value;
  let email = document.getElementById("email").value;
  let password = document.getElementById("password").value;
  
  if (name == "") {
    alert("Name cannot be empty!");
    return false;
  }
  
  if (!email.includes("@")) {
    alert("Enter a valid email address!");
    return false;
  }
  
  if (password.length < 6) {
    alert("Password must be at least 6 characters long!");
    return false;
  }
  
  alert("Form Submitted Successfully!");
  return true;
}
</script>

🔹 How It Works (Diagram in Words)

Diagram (Explained in Words):

[User Inputs Data] → [JS Script Checks Data]
        ↓                    ↓
   (If Invalid)        (If Valid)
  Show Error Msg       Submit to Server

[User Inputs Data] → [JS Script Checks Data]
        ↓                    ↓
   (If Invalid)        (If Valid)
  Show Error Msg       Submit to Server

🔹 Real-World Analogy

Think of JavaScript validation like a security guard at a building entrance:

• Checks your ID (data format)
• Confirms your name on the list (required field)
• Allows entry only if everything is correct (submit form)

🔹 Common JavaScript Validation Functions

🔹 ECET & Real-World Importance

• Questions on client-side vs server-side validation are frequent.
• Small code snippets like onsubmit="return validateForm()" are commonly asked.
• Concepts connect to web development projects and JavaScript basics in B.Tech.

⚙️ Formulas (Plain LaTeX, No Boxes)

🔟 10 MCQs (ECET + GATE Hybrid)

1️⃣ Client-side validation is performed on the:
A) Server
B) Client browser
C) Database
D) Compiler

2️⃣ Which JavaScript event is used for form validation before submission?
A) onclick
B) onblur
C) onsubmit
D) onchange

3️⃣ Which JavaScript method checks if a value is a number or not?
A) parseInt()
B) Number()
C) isNaN()
D) eval()

4️⃣ What happens if return false; is used in a validation function?
A) Form will submit
B) Form will not submit
C) Page reloads
D) Code crashes

5️⃣ Which of the following is correct to check empty input?
A) if(value == “”)
B) if(value = “”)
C) if(value === null)
D) if(value == NULL)

6️⃣ Which HTML tag calls a JavaScript function on form submission?
A) <button>
B) <form>
C) <input type=”text”>
D) <label>

7️⃣ What does alert() function do in JavaScript?
A) Prints on console
B) Shows popup message
C) Validates form
D) Submits data

8️⃣ Client-side validation helps to:
A) Reduce server load
B) Increase server processing
C) Slow down response
D) None of the above

9️⃣ Which of the following is a valid regex for basic email validation?
A) /@/
B) /\S+@\S+\.\S+/
C) /email+/
D) /[a-z]/

10️⃣ JavaScript runs on:
A) Browser
B) Server
C) OS kernel
D) Database

✅ Answer Key

Q No | Answer
1 | B
2 | C
3 | C
4 | B
5 | A
6 | B
7 | B
8 | A
9 | B
10 | A

🧠 MCQ Explanations

1️⃣ B → Validation runs in the client browser before data reaches the server.
2️⃣ C → onsubmit is triggered when the form is submitted.
3️⃣ C → isNaN() checks whether the input is a number or not.
4️⃣ B → Returning false stops the form submission.
5️⃣ A → Correct syntax for empty string check.
6️⃣ B → <form> uses onsubmit to call JS function.
7️⃣ B → alert() shows a popup message to the user.
8️⃣ A → Validations prevent unnecessary server requests.
9️⃣ B → /\S+@\S+\.\S+/ checks basic email pattern.
10️⃣ A → JavaScript executes on the browser’s engine (e.g., V8, SpiderMonkey).

🎯 Motivation (ECET 2026 Specific)

Client-side validation is one of the most repeated ECET Web Tech questions — simple yet conceptual.
It shows your practical understanding of JavaScript and web behavior.
Mastering this helps you score direct marks in theory and apply logic easily in web projects.
Keep practicing daily — your consistency = top rank in ECET 2026! 🚀

📲 CTA (Fixed)

Join our ECET 2026 CSE WhatsApp Group for daily quizzes & study notes:
👉 https://chat.whatsapp.com/GniYuv3CYVDKjPWEN086X9