Merge pull request #616 from Adez017/Form-validation

Added form validation

Author: gyanshankar1708

index.html

@@ -1999,107 +1999,133 @@ <h2 class="feedback-title text-center mb-3">Feedback & Reviews</h2>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"
     defer></script>
   <script>
-    // Logo switching functionality for dark mode
-    document.addEventListener('DOMContentLoaded', function () {
-      const logo = document.querySelector("#logo");
-
-      // Function to update logo based on theme
-      function updateLogo() {
-        const isDark = document.documentElement.getAttribute("data-bs-theme") === "dark";
-        if (isDark) {
-          logo.src = 'images/Logo.png';
-        } else {
-          logo.src = 'images/Logo_new.png';
+  document.addEventListener("DOMContentLoaded", function () {
+    /* ----------------------------
+       Logo Switching for Dark Mode
+    ----------------------------- */
+    const logo = document.querySelector("#logo");
+
+    function updateLogo() {
+      const isDark = document.documentElement.getAttribute("data-bs-theme") === "dark";
+      logo.src = isDark ? "images/Logo.png" : "images/Logo_new.png";
+    }
+
+    // Initial update
+    updateLogo();
+
+    // Watch for theme changes
+    const observer = new MutationObserver(function (mutations) {
+      for (const mutation of mutations) {
+        if (mutation.type === "attributes" && mutation.attributeName === "data-bs-theme") {
+          updateLogo();
         }
       }
+    });
 
-      // Update logo when page loads
-      updateLogo();
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-bs-theme"],
+    });
 
-      // Watch for theme changes
-      const observer = new MutationObserver(function (mutations) {
-        mutations.forEach(function (mutation) {
-          if (mutation.type === 'attributes' && mutation.attributeName === 'data-bs-theme') {
-            updateLogo();
-          }
-        });
+    /* ----------------------------
+       Carousel Initialization
+    ----------------------------- */
+    const carouselEl = document.getElementById("carouselExampleDark");
+    let carouselInstance = null;
+    if (carouselEl) {
+      carouselInstance = new bootstrap.Carousel(carouselEl, {
+        interval: 4000,
+        wrap: true,
       });
+    }
 
-      observer.observe(document.documentElement, {
-        attributes: true,
-        attributeFilter: ['data-bs-theme']
+    // Custom next button
+    const customNextButton = document.getElementById("customNextButton");
+    if (customNextButton && carouselInstance) {
+      customNextButton.addEventListener("click", function () {
+        carouselInstance.next();
       });
-    });
+    }
+
+    /* ----------------------------
+       Feedback Form Handling
+    ----------------------------- */
+    const feedbackForm = document.getElementById("feedbackForm");
+    const successMessage = document.getElementById("successMessage");
+    const errorMessage = document.getElementById("errorMessage");
+
+    if (feedbackForm) {
+      feedbackForm.addEventListener("submit", function (event) {
+        event.preventDefault();
+
+        const name = document.getElementById("userName").value.trim();
+        const email = document.getElementById("userEmail").value.trim();
+        const feedback = document.getElementById("userFeedback").value.trim();
+
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+        if (!name || !email || !feedback) {
+          showError("⚠️ Please fill in all required fields.");
+          return;
+        }
+
+        if (!emailRegex.test(email)) {
+          showError("⚠️ Please enter a valid email address.");
+          return;
+        }
 
-    // JavaScript (custom carousel) 
-      var myCarousel = new bootstrap.Carousel('#carouselExampleDark', {
-          interval: 4000,  // auto-slide time
-          wrap: true       // enables infinite loop
-    });
-    // SIMPLE FEEDBACK FUNCTIONS - FORM STAYS VISIBLE
-    function showSuccessMessage(event) {
-      event.preventDefault();
-      
-      // Get form values
-      var name = document.getElementById('userName').value;
-      var email = document.getElementById('userEmail').value;
-      var feedback = document.getElementById('userFeedback').value;
-      
-      // Check if all fields are filled
-      if (name && email && feedback) {
         // Save to localStorage
-        var data = {
-          name: name,
-          email: email,
-          feedback: feedback,
-          timestamp: new Date().toISOString()
+        const data = {
+          name,
+          email,
+          feedback,
+          timestamp: new Date().toISOString(),
         };
-        
-        var feedbacks = JSON.parse(localStorage.getItem('growcraft_feedbacks') || '[]');
+
+        const feedbacks = JSON.parse(localStorage.getItem("growcraft_feedbacks") || "[]");
         feedbacks.push(data);
-        localStorage.setItem('growcraft_feedbacks', JSON.stringify(feedbacks));
-        
-        // KEEP FORM VISIBLE - Just show success message below
-        document.getElementById('successMessage').style.display = 'block';
-        
-        // Reset form fields and hide success message after 4 seconds
-        setTimeout(function() {
-          document.getElementById('successMessage').style.display = 'none';
-          document.getElementById('feedbackForm').reset();
+        localStorage.setItem("growcraft_feedbacks", JSON.stringify(feedbacks));
+
+        // Show success message
+        showSuccess("✅ Feedback submitted successfully!");
+
+        // Reset after delay
+        setTimeout(function () {
+          feedbackForm.reset();
+          successMessage.style.display = "none";
+          if (errorMessage) errorMessage.style.display = "none";
         }, 4000);
-        
-      } else {
-        alert('Please fill all required fields!');
+      });
+    }
+
+    function showSuccess(msg) {
+      if (successMessage) {
+        successMessage.textContent = msg;
+        successMessage.style.display = "block";
+      }
+      if (errorMessage) {
+        errorMessage.style.display = "none";
       }
-      
-      return false;
     }
-    
-    function clearForm() {
-      document.getElementById('feedbackForm').reset();
-      document.getElementById('successMessage').style.display = 'none';
+
+    function showError(msg) {
+      if (errorMessage) {
+        errorMessage.textContent = msg;
+        errorMessage.style.display = "block";
+      }
+      if (successMessage) {
+        successMessage.style.display = "none";
+      }
     }
 
-  </script>
-  <script>
-  document.addEventListener("DOMContentLoaded", function () {
+    /* ----------------------------
+       Dynamic Year in Footer
+    ----------------------------- */
     const yearSpan = document.getElementById("currentYear");
-    yearSpan.textContent = new Date().getFullYear();
+    if (yearSpan) {
+      yearSpan.textContent = new Date().getFullYear();
+    }
   });
-  </script>
-  <script>
-document.addEventListener('DOMContentLoaded', function() {
-  // Get the custom button and Bootstrap carousel
-  const customNextButton = document.getElementById('customNextButton');
-  const carousel = new bootstrap.Carousel(document.getElementById('carouselExampleDark'));
-  
-  // Add click event to custom button
-  if (customNextButton) {
-    customNextButton.addEventListener('click', function() {
-      carousel.next(); // Go to next slide
-    });
-  }
-});
 </script>
 </body>