From 2ccc52c4c485cc7e4b645f9ba746b9a3c8d3fc99 Mon Sep 17 00:00:00 2001
From: Ananya Seth <98960585+ananyasethh@users.noreply.github.com>
Date: Mon, 31 Jul 2023 17:07:31 +0530
Subject: [PATCH] Update contact.html

---
 contact.html | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/contact.html b/contact.html
index 043f0f2..a196d81 100644
--- a/contact.html
+++ b/contact.html
@@ -45,16 +45,20 @@ <h2 class="text-center">Contact Us</h2>
       <form onsubmit="handleFormSubmit(event)">
       <div class="form-group">
           <label>Name</label>
-          <input type="text" name="user" autocomplete="off" class="form-control">
+          <input type="text" name="user" autocomplete="off" class="form-control" required>
         </div>
         <div class="form-group">
           <label>Email ID</label>
-          <input type="email" name="email" autocomplete="off" class="form-control">
+          <input type="email" name="email" autocomplete="off" class="form-control" required>
         </div>
         <div class="text-center">
           <button type="submit" class="btn btn-success">Submit</button>
         </div>
       </form>
+      <!-- Display validation messages -->
+      <div id="validation-messages" class="text-center" style="display: none; color: red;">
+        Please fill out all the fields.
+      </div>
        <!-- Display success message div -->
       <div id="success-message" class="text-center" style="display: none; color: green;">
         Your form is submitted successfully!
@@ -75,14 +79,26 @@ <h2 class="text-center">Contact Us</h2>
 
   </div>
   </footer>
+  
+  <!-- Scripts and validation function as before... -->
   <script>
     function handleFormSubmit(event) {
       event.preventDefault(); // Prevent the form from submitting normally
 
+      const formData = new FormData(event.target);
+      const name = formData.get("user");
+      const email = formData.get("email");
+
+      // Basic form validation
+      if (name.trim() === '' || email.trim() === '') {
+        const validationMessages = document.getElementById("validation-messages");
+        validationMessages.style.display = "block";
+        return; // Don't proceed with form submission if fields are empty
+      }
+
       // Your form submission code here (e.g., sending data to a server using AJAX)
       // For this example, we'll simply log the form data to the console.
 
-      const formData = new FormData(event.target);
       for (var [key, value] of formData.entries()) {
         console.log(key + ": " + value);
       }