feat: Add Success Message and Form Validations to Appointment Form

assets/js/script.js

@@ -87,4 +87,55 @@ const filter = function () {
   }
 }
 
-addEventOnElem(filterBtns, "click", filter);
+addEventOnElem(filterBtns, "click", filter);
+
+
+// <!-- JavaScript for Success Message and Form Validation -->
+document.getElementById('appointmentForm').addEventListener('submit', function (event) {
+  event.preventDefault(); 
+
+
+  const nameInput = this.querySelector('[name="name"]');
+  const emailInput = this.querySelector('[name="email_address"]');
+  const phoneInput = this.querySelector('[name="phone"]');
+  const categoryInput = this.querySelector('[name="category"]');
+  const dateInput = this.querySelector('[name="date"]');
+  const messageInput = this.querySelector('[name="message"]');
+
+
+  if (!nameInput.checkValidity()) {
+    alert('Please enter a valid name (letters and spaces only).');
+    return;
+  }
+  if (!emailInput.checkValidity()) {
+    alert('Please enter a valid email address.');
+    return;
+  }
+  if (!phoneInput.checkValidity()) {
+    alert('Please enter a valid 10-digit phone number.');
+    return;
+  }
+  if (categoryInput.value === "") {
+    alert('Please select a category.');
+    return;
+  }
+  if (!dateInput.checkValidity()) {
+    alert('Please select a valid date.');
+    return;
+  }
+  if (!messageInput.checkValidity()) {
+    alert('Please write a message.');
+    return;
+  }
+
+
+  const successMessage = document.querySelector('.success-message');
+  successMessage.style.display = 'block'; 
+
+
+  this.reset();
+
+setTimeout(() => {
+  successMessage.style.display = 'none';
+}, 5000);
+});

index.html

@@ -750,38 +750,32 @@ <h2 class="h2 section-title">Make Appointment</h2>
                 suspendisse
               </p>
 
-              <form action="" class="appoin-form">
-
+              <form action="" class="appoin-form" id="appointmentForm">
                 <div class="input-wrapper">
-                  <input type="text" name="name" placeholder="Your Full Name" required class="input-field">
-
+                  <input type="text" name="name" placeholder="Your Full Name" required class="input-field" pattern="[A-Za-z\s]+" title="Please enter a valid name (letters and spaces only)">
                   <input type="email" name="email_address" placeholder="Email Address" required class="input-field">
                 </div>
-
                 <div class="input-wrapper">
-                  <input type="text" name="phone" placeholder="Phone Number" required class="input-field">
-
-                  <select name="category" class="input-field">
-
-                    <option value="Select category">Select category</option>
+                  <input type="text" name="phone" placeholder="Phone Number" required class="input-field" pattern="\d{10}" title="Please enter a valid 10-digit phone number">
+                  <select name="category" class="input-field" required>
+                    <option value="">Select category</option>
                     <option value="Beauty & spa">Beauty & spa</option>
                     <option value="Body massage">Body massage</option>
                     <option value="Shaving & Facial">Shaving & Facial</option>
                     <option value="Hair Color">Hair Color</option>
-
                   </select>
                 </div>
-
-                <input type="date" name="date" required class="input-field date">
-
+                <input type="date" name="date" required class="input-field date" min="2023-10-01">
                 <textarea name="message" placeholder="Write Message" required class="input-field"></textarea>
-
                 <button type="submit" class="form-btn">
                   <span class="span">Appointment Now</span>
-
                   <ion-icon name="arrow-forward" aria-hidden="true"></ion-icon>
                 </button>
-
+
+                <!-- Success Message -->
+                <p class="success-message" style="display: none; color: green; margin-top: 15px;">
+                  Your appointment has been successfully booked! We will contact you soon.
+                </p>
               </form>
 
             </div>