Day 28 ECET 2026 CSE – HTML Form Validation with JavaScript (Examples + MCQs)

Concept Notes

What is Form Validation?
Form Validation means checking whether the user has entered valid data into a form before submitting it to the server. It helps prevent errors and ensures correct input.

• Types of Validation:
  • Client-side Validation → Done in browser using JavaScript (fast, no server load).
  • Server-side Validation → Done on server (more secure, final check).

Why JavaScript Validation?

• Provides instant feedback to the user.
• Reduces invalid submissions.
• Prevents blank fields, wrong emails, short passwords, etc.

⚙️ Common Validations with Examples

1️⃣ Required Field Validation

<form onsubmit="return validateForm()">
  <input type="text" id="username" placeholder="Enter username">
  <input type="submit" value="Submit">
</form>

<script>
function validateForm() {
  let user = document.getElementById("username").value;
  if (user === "") {
    alert("Username cannot be empty!");
    return false;
  }
  return true;
}
</script>

<form onsubmit="return validateForm()">
  <input type="text" id="username" placeholder="Enter username">
  <input type="submit" value="Submit">
</form>

<script>
function validateForm() {
  let user = document.getElementById("username").value;
  if (user === "") {
    alert("Username cannot be empty!");
    return false;
  }
  return true;
}
</script>

2️⃣ Email Validation

<form onsubmit="return validateForm()">
  <input type="text" id="username" placeholder="Enter username">
  <input type="submit" value="Submit">
</form>

<script>
function validateForm() {
  let user = document.getElementById("username").value;
  if (user === "") {
    alert("Username cannot be empty!");
    return false;
  }
  return true;
}
</script>

<form onsubmit="return validateForm()">
  <input type="text" id="username" placeholder="Enter username">
  <input type="submit" value="Submit">
</form>

<script>
function validateForm() {
  let user = document.getElementById("username").value;
  if (user === "") {
    alert("Username cannot be empty!");
    return false;
  }
  return true;
}
</script>

3️⃣ Password Length Validation

<form onsubmit="return checkPassword()">
  <input type="password" id="pwd" placeholder="Enter password">
  <input type="submit" value="Submit">
</form>

<script>
function checkPassword() {
  let pass = document.getElementById("pwd").value;
  if (pass.length < 6) {
    alert("Password must be at least 6 characters!");
    return false;
  }
  return true;
}
</script>

<form onsubmit="return checkPassword()">
  <input type="password" id="pwd" placeholder="Enter password">
  <input type="submit" value="Submit">
</form>

<script>
function checkPassword() {
  let pass = document.getElementById("pwd").value;
  if (pass.length < 6) {
    alert("Password must be at least 6 characters!");
    return false;
  }
  return true;
}
</script>

4️⃣ Number Validation (Age Example)

<form onsubmit="return checkAge()">
  <input type="number" id="age" placeholder="Enter age">
  <input type="submit" value="Submit">
</form>

<script>
function checkAge() {
  let age = document.getElementById("age").value;
  if (age < 18) {
    alert("You must be at least 18 years old!");
    return false;
  }
  return true;
}
</script>

<form onsubmit="return checkAge()">
  <input type="number" id="age" placeholder="Enter age">
  <input type="submit" value="Submit">
</form>

<script>
function checkAge() {
  let age = document.getElementById("age").value;
  if (age < 18) {
    alert("You must be at least 18 years old!");
    return false;
  }
  return true;
}
</script>

🔟 10 Most Expected MCQs – ECET 2026 (HTML Form Validation)

Q1. Form validation done using JavaScript is called?
A) Server-side validation
B) Client-side validation
C) Backend validation
D) Database validation

Q2. Which event is commonly used to trigger form validation?
A) onfocus
B) onsubmit
C) onclick
D) onchange

Q3. Which method checks if a string matches a pattern?
A) test()
B) match()
C) check()
D) validate()

Q4. Which of the following is NOT a form field?
A) <input>
B) <select>
C) <textarea>
D) <div>

Q5. Which type of regex checks for email format?
A) /^[0-9]+$/
B) /^[^ ]+@[^ ]+.[a-z]{2,3}$/
C) /^[A-Z]+$/
D) None

Q6. Client-side validation is ______ than server-side validation.
A) Slower
B) Faster
C) Equal
D) None

Q7. What does return false; do inside validation function?
A) Stops form submission
B) Submits form
C) Refreshes form
D) Clears form

Q8. Which HTML5 attribute also provides basic validation without JavaScript?
A) validate
B) required
C) must
D) none

Q9. Which is better for security?
A) Only Client-side
B) Only Server-side
C) Both Client + Server
D) None

Q10. JavaScript validation runs on?
A) Browser
B) Server
C) Database
D) Compiler

✅ Answer Key

🧠 Explanations

• Q1 → B: JavaScript validation happens in browser → client-side.
• Q2 → B: onsubmit event triggers form validation before sending data.
• Q3 → A: test() method checks regex pattern.
• Q4 → D: <div> is not a form field element.
• Q5 → B: The regex checks email structure.
• Q6 → B: Client-side validation is faster.
• Q7 → A: return false; prevents form submission.
• Q8 → B: required attribute ensures non-empty field.
• Q9 → C: Both validations are needed for security.
• Q10 → A: JavaScript runs on the browser.

🎯 Why Practice Matters for ECET 2026

• Web Technologies is one of the sure-shot sections in ECET.
• Form validation is repeated every year in CSE papers.
• Direct coding questions & MCQs → easy scoring.
• Practical usage in projects and interviews (login forms, signup forms).

📲 CTA

👉 For daily ECET MCQs, coding problems & video classes:
Join our Telegram group: @LearnNewThingsHub