CoursesJavaScript TutorialEvent Bubbling Capturing and Form Validation
Lesson 14Beginner
4.9

JavaScript Tutorial logoEvent Bubbling Capturing and Form Validation

Continue your JavaScript Tutorial learning path with hands-on explanation, code practice, and quiz.

PreviousNext

Course

JavaScript Tutorial

Estimated Time

8 min

Progress

19%

Track Position

14 / 73

Lesson Overview

Simple Explanation

Event bubbling me event child se parent tak jata hai; capturing me parent se child tak aata hai. Form validation user input ko rules ke against check karti hai.

Code Explanation

Submit event preventDefault karta hai aur required rule check karta hai.

Output Description

Invalid input par error message, valid input par success alert milega.

Practice Exercise

Email regex validation add karo aur bubbling logs compare karo.

Extra Explanation

Why This Matters

Event Bubbling Capturing and Form Validation is core to dynamic behavior. Strong fundamentals here help you build forms, API flows, and interactive UI with confidence.

Real-World Workflow

Complex features are usually split into small functions, then verified through focused logging and tiny test cases.

Common Mistakes to Avoid

Avoid uncontrolled globals, weak error handling, and ignored async states. Define clear input-output expectations for each function.

Example + Live Practice

<!DOCTYPE html>
<html>
<body>
  <div id="outer" style="padding:12px;border:1px solid #ccc;">
    <button id="inner">Test Bubbling</button>
  </div>

  <form id="signupForm">
    <input id="name" placeholder="Name" />
    <button type="submit">Submit</button>
  </form>
  <p id="error" style="color:red"></p>

  <script>
    document.getElementById("outer").addEventListener("click", () => console.log("Outer click"));
    document.getElementById("inner").addEventListener("click", () => console.log("Inner click"));

    document.getElementById("signupForm").addEventListener("submit", (e) => {
      e.preventDefault();
      const name = document.getElementById("name").value.trim();
      document.getElementById("error").textContent = name ? "" : "Name is required";
      if (name) alert("Form submitted");
    });
  </script>
</body>
</html>

Try It Yourself

Loading editor...

Test Your Knowledge

Quiz Coming Soon

Quiz for this lesson is not added yet.

Save Your Work

Lesson ke end par apna code save karein. Dashboard me aap kabhi bhi is saved code ko dobara dekh sakte hain.

Event Bubbling Capturing and Form Validation - dicodingschool