Merge pull request #392 from Ayushmaanagarwal1211/Adding-Validation

Added Rating Validation in Contact Us form

Author: mdazfar2

website2.0/contactus.css

@@ -10,6 +10,11 @@ body {
     margin-bottom: 100px;
     gap: 200px;
 }
+#error{
+     color: red;
+    font-size: 18px;
+    text-align: center;
+}
 input::placeholder{
     margin: 0px;
     font-family: Poppins;

website2.0/contactus.html

@@ -127,8 +127,8 @@ <h1>Contact Us</h1>
                     <span class="star" data-value="4">&#9733;</span>
                     <span class="star" data-value="5">&#9733;</span>
                 </div>
-    
-                <button type="submit" id="button">Submit</button>
+    <p id="error">Please Give Any Rating</p>
+                <button type="submit" id="button" onclick="handleSubmit()">Submit</button>
             <p id="thank-you-message" style="color: white; display: none;">Thank you !!<br>We will connect soon.</p>
             </form>
             </div>
@@ -153,6 +153,22 @@ <h1>Contact Us</h1>
         speed: 400, 
     }); 
 </script>
+
+
+<script>
+    const stars = document.querySelectorAll('.star');
+    let selectedRating = 0;
+
+    stars.forEach(star => {
+        star.addEventListener('click', () => {
+            selectedRating = star.getAttribute('data-value');            
+        });
+    });
+</script>
+
+<script>
+document.getElementById('error').style.display='none'
+</script>
 <script>
 
     // if(window.innerWidth>800){

website2.0/contactus.js

@@ -12,9 +12,21 @@ document.addEventListener("DOMContentLoaded", () => {
     });
   });
 });
+
+function handleError(){
+  document.getElementById('error').style.display=''
+  
+  setTimeout(()=>{
+      document.getElementById('error').style.display='none'
+  },2000)
+}
+
+
 document.getElementById('contact-form').addEventListener('submit', function(event) {
   event.preventDefault();
-
+  if(selectedRating==0){
+    return handleError()
+}
   const thankYouMessage = document.getElementById('thank-you-message');
   thankYouMessage.style.display = 'block';