From 15198b099bf578587f2e74a7caa5136b6d4dc4ff Mon Sep 17 00:00:00 2001
From: Daaimah Tibrey <daaimah12392@gmail.com>
Date: Tue, 26 Aug 2025 07:21:45 -0700
Subject: [PATCH] slacked javascript from victor

---
 templates/app/questionnaire.html | 35 ++++++++++++++++++++++++++------
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/templates/app/questionnaire.html b/templates/app/questionnaire.html
index ee3f37c5..e8a393d4 100644
--- a/templates/app/questionnaire.html
+++ b/templates/app/questionnaire.html
@@ -317,23 +317,46 @@ <h1>Techtonica Application</h1>
 </style>
 
 <script>
+  console.log("This is the console that is showing");
+  document.addEventListener("DOMContentLoaded", () => {
+    document
+      .querySelectorAll("#app-form-3 select[required]")
+      .forEach((select) => {
+        select.addEventListener("change", () => {
+          if (select.value) {
+            select.style.border = "";
+            const err = select.nextElementSibling;
+            if (err?.classList.contains("error-message")) {
+              err.remove();
+            }
+          }
+        });
+      });
+  });
   function validateForm() {
+    console.log(" validate form");
     const form = document.getElementById("app-form-3");
     const requiredSelects = form.querySelectorAll("select[required]");
     let allValid = true;
-
     requiredSelects.forEach((select) => {
       select.style.border = "";
-
+      const existingError = select.nextElementSibling;
+      if (existingError?.classList.contains("error-message")) {
+        existingError.remove();
+      }
       if (select.value === "") {
         allValid = false;
         select.style.border = "2px solid red";
+        const error = document.createElement("div");
+        error.className = "error-message";
+        error.style.color = "red";
+        error.style.fontSize = "12px";
+        error.innerText = "Please select an option.";
+        //select.parentNode.insertBefore(error, select.nextSibling)
+        select.insertAdjacentElement("afterend", error);
       }
     });
-
-    if (!allValid) {
-      alert("Please select an option for all questions.");
-    } else {
+    if (allValid) {
       window.location.href = "/app-long-text";
     }
   }