Add client-side validation for city/state/country inputs

Frontend/index.html

@@ -455,6 +455,23 @@ <h3>Environmental Intelligence</h3>
           <button type="submit">Send</button>
         </form>
 
+        <form id="weatherForm">
+  <label for="city">City:</label>
+  <input type="text" id="city" name="city" required />
+
+  <label for="state">State:</label>
+  <input type="text" id="state" name="state" required />
+
+  <label for="country">Country:</label>
+  <input type="text" id="country" name="country" required />
+
+  <button type="submit">Check Weather</button>
+</form>
+
+<!-- Inline error messages -->
+<div id="formErrors" style="color: red; margin-top: 10px;"></div>
+
+
         <div id="chatbot-status" class="chatbot-status hidden"></div>
       </section>
     </div>

Frontend/script.js

@@ -263,3 +263,45 @@ if (scrollTopBtn) {
     });
   });
 }
+
+
+const form = document.getElementById("weatherForm");
+const errorsEl = document.getElementById("formErrors");
+
+form.addEventListener("submit", async (e) => {
+  e.preventDefault();
+  errorsEl.textContent = ""; // clear old errors
+
+  const city = document.getElementById("city").value.trim();
+  const state = document.getElementById("state").value.trim();
+  const country = document.getElementById("country").value.trim();
+
+  // Regex: only letters, spaces, hyphens allowed
+  const nameRegex = /^[a-zA-Z\s-]+$/;
+  let errors = [];
+
+  if (!city || !nameRegex.test(city)) {
+    errors.push("City must contain only letters.");
+  }
+  if (!state || !nameRegex.test(state)) {
+    errors.push("State must contain only letters.");
+  }
+  if (!country || !nameRegex.test(country)) {
+    errors.push("Country must contain only letters.");
+  }
+
+  if (errors.length > 0) {
+    errorsEl.innerHTML = errors.join("<br>");
+    return; // stop before API call
+  }
+
+  //  If validation passes, proceed with API call
+  try {
+    const response = await fetch(`/weather?city=${city}&state=${state}&country=${country}`);
+    const data = await response.json();
+    console.log(data);
+    // TODO: update UI with weather data
+  } catch (error) {
+    console.error("Error fetching weather:", error);
+  }
+});