feat: Add form validations and success message to contact form

assets/js/script.js

@@ -102,4 +102,46 @@ if (localStorage.getItem("theme") === "light_theme") {
   themeToggleBtn.classList.remove("active");
   document.body.classList.remove("light_theme");
   document.body.classList.add("dark_theme");
-}
+}
+
+document.getElementById('contactForm').addEventListener('submit', function (event) {
+  event.preventDefault(); // Prevent the form from submitting
+
+  // Perform additional validation if needed
+  const name = document.getElementById('name');
+  const email = document.getElementById('email');
+  const phone = document.getElementById('phone');
+  const message = document.getElementById('message');
+
+  if (!name.checkValidity()) {
+    alert(name.title);
+    return;
+  }
+
+  if (!email.checkValidity()) {
+    alert(email.validationMessage || 'Please enter a valid email address.');
+    return;
+  }
+
+  if (!phone.checkValidity()) {
+    alert(phone.title);
+    return;
+  }
+
+  if (!message.checkValidity()) {
+    alert('Message must be between 10 and 500 characters.');
+    return;
+  }
+
+  // Simulate successful submission
+  const successMessage = document.querySelector('.success-message');
+  successMessage.style.display = 'block'; // Show the success message
+
+  // Hide the success message after 5 seconds
+  setTimeout(() => {
+    successMessage.style.display = 'none';
+  }, 5000);
+
+  // Clear the form fields
+  this.reset();
+});

index.html

@@ -803,68 +803,40 @@ <h3 class="h4 contact-item-title">Email:</h3>
 
         </div>
 
-        <form action="" class="contact-form">
-
+        <form action="" class="contact-form" id="contactForm">
           <div class="form-wrapper">
-
             <label for="name" class="form-label">Name</label>
-
             <div class="input-wrapper">
-
-              <input type="text" name="name" id="name" required placeholder="e.g John Doe" class="input-field">
-
+              <input type="text" name="name" id="name" required placeholder="e.g. John Doe" class="input-field" pattern="^[A-Za-z\s]{3,50}$" title="Please enter a valid name (3-50 characters, letters only)">
               <ion-icon name="person-circle"></ion-icon>
-
             </div>
-
           </div>
-
           <div class="form-wrapper">
-
             <label for="email" class="form-label">Email</label>
-
             <div class="input-wrapper">
-
-              <input type="email" name="email" id="email" required placeholder="e.g [email protected]"
-                class="input-field">
-
+              <input type="email" name="email" id="email" required placeholder="e.g. [email protected]" class="input-field">
               <ion-icon name="mail"></ion-icon>
-
             </div>
-
           </div>
-
           <div class="form-wrapper">
-
             <label for="phone" class="form-label">Phone</label>
-
             <div class="input-wrapper">
-
-              <input type="tel" name="phone" id="phone" required placeholder="Phone Number" class="input-field">
-
+              <input type="tel" name="phone" id="phone" required placeholder="Phone Number" class="input-field" pattern="^\+?[0-9]{10,15}$" title="Please enter a valid phone number (10-15 digits, optional +)">
               <ion-icon name="call"></ion-icon>
-
             </div>
-
           </div>
-
           <div class="form-wrapper">
-
             <label for="message" class="form-label">Message</label>
-
             <div class="input-wrapper">
-
-              <textarea name="message" id="message" required placeholder="Write message..."
-                class="input-field"></textarea>
-
+              <textarea name="message" id="message" required placeholder="Write message..." class="input-field" minlength="10" maxlength="500"></textarea>
               <ion-icon name="chatbubbles"></ion-icon>
-
             </div>
-
           </div>
-
           <button type="submit" class="btn btn-primary">Send</button>
-
+          <!-- Success Message -->
+          <p class="success-message" style="display: none; color: green; margin-top: 10px;">
+            Thank you! Your message has been sent successfully.
+          </p>
         </form>
 
       </section>