Day 2: Building Custom Form Validation with JavaScript

💡 Introduction:

Today is Day 2 of my coding journey challenge, and I decided to build a user registration form using HTML, CSS, and JavaScript. Instead of using libraries or frameworks, I focused on learning how to do things from scratch — especially how to validate user inputs and give live feedback on the form.

---

🛠️ What I Built:

A simple registration form with the following fields:

• Username

• Email

• Password

• Confirm Password

I added logic to:

• Prevent form submission if any field is empty

• Display error messages near each input

• Show green/red borders based on input validity

---

🔍 Key JavaScript Concepts I Practiced:

1. DOM Selection using getElementById

2. Event handling with form.addEventListener("submit", ...)

3. Validation logic using custom functions

4. Dynamically updating the UI with className and innerText

---

✅ Code Snippet Example:

jsCopy codefunction checkRequired(inputArray) {
    inputArray.forEach(input => {
        if (input.value.trim() === "") {
            showError(input, `${formatFieldName(input)} is required`);
        } else {
            showSuccess(input);
        }
    });
}

---

🧠 What I Learned:

• Writing clean validation functions helps me reuse logic

• Giving visual feedback (like red borders or error messages) makes the form more user-friendly

• Working directly with the DOM helps me better understand what JavaScript does behind the scenes

---

🗓️ Daily Reflection:

Even though it seemed simple at first, building this form taught me how much happens under the hood in web development. I'm feeling more confident with each day and excited to keep pushing forward.

---

🙌 Final Words:

If you're also learning JavaScript or starting your web dev journey, I highly recommend building small UI projects like this. You’ll learn a lot more by doing.