Merge pull request #26 from git-christ/form-validation

inital draft
Sbiswas001 · Jun 14, 2024 · ed3797a · ed3797a
2 parents 98e0457 + eb844b1
commit ed3797a
Show file tree

Hide file tree

Showing 4 changed files with 130 additions and 25 deletions.
diff --git a/root/assets/images/form-validation.png b/root/assets/images/form-validation.png
diff --git a/root/assets/scripts/form-validation.js b/root/assets/scripts/form-validation.js
@@ -0,0 +1,44 @@
+let loginForm = document.getElementById("loginForm")
+
+loginForm.addEventListener("submit", e => {
+  e.preventDefault()
+
+  validateName()
+
+  validatePhone()
+
+  validateEmail()
+})
+
+function validateName() {
+  var name = document.getElementById("contact-name").value
+
+  if (name.length == 0 && !name.match(/^[A-Za-z]*\s{1}[A-Za-z]*&/)) {
+    document.getElementById("contact-name").classList.add("is-invalid")
+  } else {
+    document.getElementById("contact-name").classList.remove("is-invalid")
+    document.getElementById("contact-name").classList.add("is-valid")
+  }
+}
+
+function validatePhone() {
+  var phone = document.getElementById("contact-phone").value
+
+  if (phone.length !== 10 && !phone.match(/^[0-9]{10}$/)) {
+    document.getElementById("contact-phone").classList.add("is-invalid")
+  } else {
+    document.getElementById("contact-phone").classList.remove("is-invalid")
+    document.getElementById("contact-phone").classList.add("is-valid")
+  }
+}
+
+function validateEmail() {
+  var email = document.getElementById("contact-email").value
+
+  if (email.length !== 10 && !email.match(/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/)) {
+    document.getElementById("contact-email").classList.add("is-invalid")
+  } else {
+    document.getElementById("contact-email").classList.remove("is-invalid")
+    document.getElementById("contact-email").classList.add("is-valid")
+  }
+}
diff --git a/root/assets/scripts/script.js b/root/assets/scripts/script.js
@@ -1,35 +1,41 @@
-document.addEventListener('DOMContentLoaded', function() {
-    const cardsData = [
-        {
-            imgSrc: 'assets/images/app1.jpg',
-            title: 'App 1',
-            description: 'Description of App 1',
-            link: 'pages/app1.html'
-        },
-        {
-            imgSrc: 'assets/images/app2.jpg',
-            title: 'App 2',
-            description: 'Description of App 2',
-            link: 'pages/app2.html'
-        }
-        // Add more cards data as needed
-    ];
+document.addEventListener("DOMContentLoaded", function () {
+  const cardsData = [
+    {
+      imgSrc: "assets/images/app1.jpg",
+      title: "App 1",
+      description: "Description of App 1",
+      link: "pages/app1.html"
+    },
+    {
+      imgSrc: "assets/images/app2.jpg",
+      title: "App 2",
+      description: "Description of App 2",
+      link: "pages/app2.html"
+    },
+    {
+      imgSrc: "assets/images/form-validation.png",
+      title: "Form Validation",
+      description: "Form validation ensures the data submitted through a web form meets specific criteria before being sent to a server.",
+      link: "pages/form-validation.html"
+    }
+    // Add more cards data as needed
+  ]
 
-    const cardsContainer = document.getElementById('cards-container');
+  const cardsContainer = document.getElementById("cards-container")
 
-    cardsData.forEach(card => {
-        const cardElement = document.createElement('div');
-        cardElement.classList.add('card');
+  cardsData.forEach(card => {
+    const cardElement = document.createElement("div")
+    cardElement.classList.add("card")
 
-        cardElement.innerHTML = `
+    cardElement.innerHTML = `
             <img src="${card.imgSrc}" alt="${card.title}">
             <div class="card-content">
                 <h2>${card.title}</h2>
                 <p>${card.description}</p>
                 <a href="${card.link}" class="button">Go to ${card.title}</a>
             </div>
-        `;
+        `
 
-        cardsContainer.appendChild(cardElement);
-    });
-});
+    cardsContainer.appendChild(cardElement)
+  })
+})
diff --git a/root/pages/form-validation.html b/root/pages/form-validation.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
+    <!-- Bootstrap Font Icon CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
+    <link rel="stylesheet" href="../assets/css/form-validation.css" />
+  </head>
+  <body>
+    <main>
+      <div class="container">
+        <div class="row min-vh-100 justify-content-center align-items-center">
+          <div class="col-lg-6">
+            <form class="needs-validation card p-3 bg-light" id="loginForm" novalidate>
+              <label for="contact-name" class="form-label">Full Name</label>
+              <div class="my-2 input-group">
+                <span class="input-group-text">
+                  <i class="bi-person"></i>
+                </span>
+                <input type="text" id="contact-name" class="form-control" placeholder="Enter your name" required />
+                <div class="invalid-feedback">Provide full name</div>
+              </div>
+              <label for="contact-phone" class="form-label">Phone Number</label>
+              <div class="my-2 input-group">
+                <span class="input-group-text">
+                  <i class="bi-telephone"></i>
+                </span>
+                <input type="tel" id="contact-phone" class="form-control" placeholder="1234 567 89" required />
+                <div class="invalid-feedback">Provide phone number</div>
+              </div>
+              <label for="contact-email" class="form-label">Email Address</label>
+              <div class="my-2 input-group">
+                <span class="input-group-text">
+                  <i class="bi-envelope"></i>
+                </span>
+                <input type="email" id="contact-email" class="form-control" placeholder="Enter your email" required />
+                <div class="invalid-feedback">Provide email</div>
+              </div>
+              <div class="my-2 text-center">
+                <button class="btn btn-primary" type="submit">Submit form</button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </main>
+    <script src="../assets/scripts/form-validation.js"></script>
+    <!-- script -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+  </body>
+</html>