contact form validation fix

saaqi · May 4, 2024 · f8c5254 · f8c5254
1 parent 122bab2
commit f8c5254
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 41 deletions.
diff --git a/index.html b/index.html
@@ -345,6 +345,7 @@ <h2 class="section-heading"><i class='bx bxs-contact'></i> Contact Us</h2>
                   <input type="text" id="contact-form-vehicle" class="contact-form-vehicle" name="contact-form-vehicle" placeholder="Company name and model">
                   <label class="contact-form-field-label" for="contact-form-message"><i class="bx bx-message-dots"></i> Message: <span class="required-label">*</span></label>
                   <textarea id="contact-form-message" class="contact-form-message" name="contact-form-message" placeholder="Your message here.." rows="5" required></textarea>
+                  <div id="errorAlerts"></div>
                   <button type="submit" name="form-submit-button" id="form-submit-button" class="form-submit-button btn rounded-pill btn-primary" data-submit-text="Send us an E-Mail" aria-live="assertive" value="form-submit-button"><i class="bx bxs-envelope"></i> Send us an E-Mail</button>
                 </form>
               </div>

diff --git a/postcss.config.cjs b/postcss.config.cjs
@@ -2,12 +2,19 @@
 // const cssnano = require('cssnano');
 // const purgecss = require("@fullhuman/postcss-purgecss");
 const IN_PRODUCTION = process.env.NODE_ENV === "production";
+const bootstrap = "node_modules/bootstrap"
+
 
 module.exports = {
   plugins: [
     IN_PRODUCTION &&
       require("@fullhuman/postcss-purgecss")({
-        content: [`index.html`, `./src/**/*.js`],
+        content: [
+          `index.html`,
+          `./src/**/*.js`,
+          `${bootstrap}/js/dist/alert.js`,
+        ]
+        ,
         defaultExtractor(content) {
           const contentWithoutStyleBlocks = content.replace(
             /<style[^]+?<\/style>/gi,

diff --git a/src/js/contact.js b/src/js/contact.js
@@ -45,50 +45,76 @@ setInterval(updateStatusRealtime, 15000);
 
 
 // JavaScript form submission
-const form = document.getElementById('homepage-contact-form');
-const nameInput = document.getElementById('contact-form-name');
-const emailInput = document.getElementById('contact-form-email');
-const messageInput = document.getElementById('contact-form-message');
-const validateEmail = (email) => {
-  const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
-  return emailRegex.test(email);
-}
-const validateForm = () => {
-  if (nameInput.value.trim() === '') {
-    alert('Please enter your name.');
-    return false;
+import "bootstrap/js/dist/alert.js";
+const formId = 'homepage-contact-form';
+const contactForm = document.getElementById(formId);
+if (contactForm) {
+
+  const nameInput = document.querySelector('#' + formId + ' #contact-form-name');
+  const emailInput = document.querySelector('#' + formId + ' #contact-form-email');
+  const messageInput = document.querySelector('#' + formId + ' #contact-form-message');
+  // const button = document.querySelector('#' + formId + ' #form-submit-button');
+
+  const validateEmail = (email) => {
+    const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+    return emailRegex.test(email);
   }
-  if (emailInput.value.trim() === '' || !validateEmail(emailInput.value)) {
-    alert('Please enter a valid email address.');
-    return false;
+
+  // Error Alerts
+  const alertPlaceholder = document.querySelector('#' + formId + ' #errorAlerts');
+  const appendAlert = (message, type) => {
+    alertPlaceholder.innerHTML = [
+      `<div class="alert alert-${type} alert-dismissible" role="alert">`,
+      `<div>${message}</div>`,
+      '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
+      '</div>'
+    ].join('')
   }
-  if (messageInput.value.trim() === '') {
-    alert('Please enter a message.');
-    return false;
+
+  const validateForm = () => {
+    if (nameInput.value.trim() === '') {
+      appendAlert('Please enter your name', 'danger');
+      return false;
+    }
+    if (emailInput.value.trim() === '' || !validateEmail(emailInput.value)) {
+      // alert('Please enter a valid email address.');
+      appendAlert('Please enter a valid email address.', 'danger');
+      return false;
+    }
+    if (messageInput.value.trim() === '') {
+      appendAlert('Please enter a message.', 'danger');
+      return false;
+    }
+    return true;
   }
-  return true;
-}
 
-form.addEventListener("submit", function (event) {
-  // Prevent default form submission
-  if (!validateForm()) {
+  contactForm.addEventListener("submit", function (event) {
+    // Prevent default form submission
     event.preventDefault();
-  } else {
-    const nameInput = document.getElementById("contact-form-name");
-    const emailInput = document.getElementById("contact-form-email");
-    const messageInput = document.getElementById("contact-form-message");
-    const receiveEmail = "[email protected]";
-    const emailButton = document.querySelector("button.form-submit-button");
 
-    // Compose email message
-    const subject = `[Contact-Form] ${nameInput.value}`;
-    const body = `${messageInput.value}\n\n${nameInput.value}\n${emailInput.value}`;
+    // Remove previous alerts
+    const alertDismiss = this.querySelectorAll('#' + formId + ' #errorAlerts > *');
+    if (alertDismiss) {
+      alertDismiss.forEach(e => {
+        e.remove();
+      });
+    };
 
-    // Open default email app and fill in appropriate fields
-    const mailtoUrl = `mailto:${encodeURIComponent(
-      receiveEmail
-    )}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
-    // Open Email client on click
-    window.open(mailtoUrl);
-  }
-});
+    if (!validateForm()) {
+      return false;
+    }
+
+    else {
+      const receiveEmail = "[email protected]";
+      // Compose email message
+      const subject = `[Contact-Form] ${nameInput.value}`;
+      const body = `${messageInput.value}\n\n${nameInput.value}\n${emailInput.value}`;
+      // Open default email app and fill in appropriate fields
+      const mailtoUrl = `mailto:${encodeURIComponent(
+        receiveEmail
+      )}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+      // Open Email client on click
+      window.open(mailtoUrl);
+    }
+  });
+}