📘 Day 39: Form Validation & Error Handling

Forms are the most common way users interact with websites — for login, registration, or feedback. Ensuring that data entered is valid improves user experience and security.

🔹 Why Form Validation?

Form validation ensures the user enters correct and complete information before it’s sent to the server.

• ✔ Prevents empty or incorrect fields
• ✔ Improves user experience
• ✔ Prevents malicious or invalid data submission

Example: Basic Form Validation

<form id="myForm">
  <label>Name:</label>
  <input type="text" id="name"><br><br>

  <label>Email:</label>
  <input type="email" id="email"><br><br>

  <button type="submit">Submit</button>
</form>

<script>
document.getElementById("myForm").addEventListener("submit", function(e){
  e.preventDefault();

  let name = document.getElementById("name").value;
  let email = document.getElementById("email").value;

  if(name === "" || email === "") {
    alert("Please fill out all fields!");
  } else if(!email.includes("@")) {
    alert("Please enter a valid email address.");
  } else {
    alert("Form submitted successfully!");
  }
});
</script>

🔹 Error Handling in JavaScript

Error handling ensures your program continues to run smoothly even when something goes wrong.

try {
  let num = prompt("Enter a number:");
  if(isNaN(num)) throw "Not a number!";
  console.log("Number is valid:", num);
} catch(err) {
  console.error("Error:", err);
} finally {
  console.log("Validation complete.");
}

🧠 Practice

Create a registration form and validate name, email, and password fields. Show appropriate error messages when input is invalid.

← Previous Next →