Form Handling & Event Listeners

📘 Form Handling & Validation

Forms are how users send data (like login, signup, feedback). JavaScript lets us validate inputs before sending them to the server.

1️⃣ Basic Form Example

Name:
Email:
Password:
Submit

👉 Here, JavaScript checks inputs before submission. If invalid, it prevents submission using e.preventDefault().

Below Code is used for above form validation.

    
 <form id="myForm">
     <label>Name: <input type="text" id="name" required></label><br><br>
     <label>Email: <input type="email" id="email" required></label><br><br>
     <label>Password: <input type="password" id="password" required></label><br><br>
     <button type="submit">Submit</button>
 </form>

 <p id="message"></p>

    <script>        
const form = document.getElementById("myForm");
const message = document.getElementById("message");

form.addEventListener("submit", function (e) {
    e.preventDefault(); // stop page reload

    const name = document.getElementById("name").value.trim();
    const email = document.getElementById("email").value.trim();
    const password = document.getElementById("password").value.trim();

    // Simple validation
    if (name === "" || email === "" || password === "") {
        message.textContent = "⚠️ All fields are required!";
        return;
    }
    if (!email.includes("@")) {
        message.textContent = "⚠️ Invalid email format!";
        return;
    }
    if (password.length < 6) {
        message.textContent = "⚠️ Password must be at least 6 characters.";
        return;
    }

    message.textContent = "✅ Form submitted successfully!";
});
    </script>                        

📘 Event Listeners

Event listeners let you react to user actions (clicks, typing, hovering, submitting forms, etc.).

1️⃣ Click Event

Click Me

2️⃣ Hover Events (mouseover & mouseout)

3️⃣ Input Event (live typing)

4️⃣ Submit Event

(Already shown in form handling above)

submit fires when a form is submitted.

Use preventDefault() to stop actual submission if validation fails.

✅ Quick Recap

• Form Handling → Collect and validate user input before sending to server.
• Validation → Check required fields, email format, password length, etc.
• Event Listeners → Attach behavior to user actions:
  • click → button clicks
  • mouseover / mouseout → hover effects
  • input → live typing feedback
  • submit → form submission