From b9be8f41489ec7e954a657b21584a7fcf9462f2e Mon Sep 17 00:00:00 2001
From: GARIMA <141991095+techy4shri@users.noreply.github.com>
Date: Mon, 22 Jul 2024 18:29:41 +0530
Subject: [PATCH] Added form validation and reset functionality for feedback
 form

- Added client-side validation for feedback form fields:
  - Required fields for name, email, and feedback comments
  - Minimum length check for feedback comments (minimum 4 characters)
  - Restriction on future dates for event date selection
- Implemented reset functionality for star ratings after form submission

This change improves user experience by enforcing required fields and ensuring data integrity in the feedback form.
---
 feed.html | 29 ++++++++++++++++++++++-------
 feed.js   | 22 +++++++++++++++++++++-
 2 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/feed.html b/feed.html
index 1d44041f..9a2d31c9 100644
--- a/feed.html
+++ b/feed.html
@@ -40,6 +40,7 @@ <h2>Tour Feedback Form</h2>
               placeholder="Name the tour you attended:"
               id="event_name"
               class="form-control"
+              required
             />
           </div>
           <div class="col-md-6">
@@ -50,6 +51,7 @@ <h2>Tour Feedback Form</h2>
               placeholder="Tour Date:"
               name="event_date"
               id="event_date"
+              required
             />
           </div>
         </div>
@@ -62,6 +64,7 @@ <h2>Tour Feedback Form</h2>
               id="FullName"
               placeholder="Your Name"
               class="form-control"
+              required
             />
           </div>
           <br />
@@ -73,6 +76,7 @@ <h2>Tour Feedback Form</h2>
               placeholder="Email Id"
               name="Email"
               id="Email"
+              required
             />
           </div>
         </div>
@@ -83,21 +87,21 @@ <h3>What's your opinion about:</h3>
           <div class="row mb-3">
             <div class="col-md-12">
               <label>Ease of navigation?</label>
-              <div class="d-flex flex-wrap" id="navigationEase"></div>
+              <div class="d-flex flex-wrap" id="navigationEase" required></div>
               <p id="navigationEase-rating-text">Rating: 0</p>
             </div>
           </div>
           <div class="row mb-3">
             <div class="col-md-12">
               <label>Booking process</label>
-              <div class="d-flex flex-wrap" id="bookingProcess"></div>
+              <div class="d-flex flex-wrap" id="bookingProcess" required></div>
               <p id="bookingProcess-rating-text">Rating: 0</p>
             </div>
           </div>
           <div class="row mb-3">
             <div class="col-md-12">
               <label>Accuracy of information provided</label>
-              <div class="d-flex flex-wrap" id="accuracyInformation"></div>
+              <div class="d-flex flex-wrap" id="accuracyInformation" required></div>
               <p id="accuracyInformation-rating-text">Rating: 0</p>
             </div>
           </div>
@@ -108,14 +112,14 @@ <h3>How would you rate the following aspects?</h3>
           <div class="row mb-3">
             <div class="col-md-12">
               <label>Payment options</label>
-              <div class="d-flex flex-wrap" id="paymentOptions"></div>
+              <div class="d-flex flex-wrap" id="paymentOptions" required></div>
               <p id="paymentOptions-rating-text">Rating: 0</p>
             </div>
           </div>
           <div class="row mb-3">
             <div class="col-md-12">
               <label>Security Measures</label>
-              <div class="d-flex flex-wrap" id="securityMeasures"></div>
+              <div class="d-flex flex-wrap" id="securityMeasures" required></div>
               <p id="securityMeasures-rating-text">Rating: 0</p>
             </div>
           </div>
@@ -123,7 +127,7 @@ <h3>How would you rate the following aspects?</h3>
           <div class="row mb-3">
             <div class="col-md-12">
               <label>Customer Support</label>
-              <div class="d-flex flex-wrap" id="customerSupport"></div>
+              <div class="d-flex flex-wrap" id="customerSupport" required></div>
               <p id="customerSupport-rating-text">Rating: 0</p>
             </div>
           </div>
@@ -187,6 +191,17 @@ <h3>How would you rate the following aspects?</h3>
           </a>
         </div>
       </form>
-    </div>
+    </div><script>
+      document.addEventListener("DOMContentLoaded", () => { //for date check and preventing future selection
+        // Get today's date in ISO format (YYYY-MM-DD)
+        const today = new Date().toISOString().split("T")[0];
+      
+        // Set min attribute for all date inputs to today's date
+        const dateInputs = document.querySelectorAll('input[type="date"]');
+        dateInputs.forEach((input) => {
+          input.setAttribute("max", today);
+        });
+      });
+      </script>
   </body>
 </html>
diff --git a/feed.js b/feed.js
index 40a82356..27947461 100644
--- a/feed.js
+++ b/feed.js
@@ -46,7 +46,7 @@ document.addEventListener("DOMContentLoaded", function () {
     const comments = document.getElementById("comments").value.trim();
 
     // Check if the feedback is empty
-    if (comments === "") {
+    if (comments === "" || comments.length < 4) {
       Swal.fire({
         icon: "error",
         title: "Oops...",
@@ -76,6 +76,26 @@ document.addEventListener("DOMContentLoaded", function () {
       // Clear the feedback form after the user acknowledges the success modal
       if (result.isConfirmed || result.isDismissed) {
         form.reset();
+
+      // Reset star ratings
+        const ratingCategories = [
+          "navigationEase",
+          "bookingProcess",
+          "accuracyInformation",
+          "paymentOptions",
+          "securityMeasures",
+          "customerSupport",
+          "overallExperience",
+        ];
+
+        ratingCategories.forEach((category) => {
+          const stars = document.querySelectorAll(`#${category} .star`);
+          stars.forEach((star) => {
+            star.classList.remove("checked");
+          });
+          const ratingText = document.getElementById(`${category}-rating-text`);
+          ratingText.textContent = `Rating: 0`;
+        });
       }
     });
   });