Added form validations

index.html

@@ -88,14 +88,15 @@ <h2></h2>
                 <h2>Contact Me</h2>
             </div>
             <div class="contact-me">
-                <div class="form">
+                <div class="form" onsubmit="return validateForm()">
                     <div class="form-card1">
                         <div class="form-card2">
                           <form class="form">
                             <p class="form-heading">Get In Touch</p>
 
                             <div class="form-field">
-                              <input required="" placeholder="Name" class="input-field" type="text" />
+                              <input required="" placeholder="Name" class="input-field" type="text" id="name"/>
+                              <span class="error-message" id="name-error"></span>
                             </div>
 
                             <div class="form-field">
@@ -104,7 +105,9 @@ <h2>Contact Me</h2>
                                 placeholder="Email"
                                 class="input-field"
                                 type="email"
+                                id="email"
                               />
+                              <span class="error-message" id="email-error"></span>
                             </div>
 
                             <div class="form-field">
@@ -113,7 +116,9 @@ <h2>Contact Me</h2>
                                 placeholder="Subject"
                                 class="input-field"
                                 type="text"
+                                id="subject"
                               />
+                              <span class="error-message" id="subject-error"></span>
                             </div>
 
                             <div class="form-field">
@@ -125,6 +130,7 @@ <h2>Contact Me</h2>
                                 class="input-field"
                                 id="messagebox"
                               ></textarea>
+                              <span class="error-message" id="messagebox-error"></span>
                             </div>
                             <button class="sendMessage-btn">Send Message</button>
                           </form>

script.js

@@ -21,14 +21,75 @@ document.addEventListener("DOMContentLoaded", function() {
 
 /*Open my email*/
 function openEmail() {
-    const emailAddress = 'your-email@example.com';
-    const subject = 'Subject of the email';
-    const message = 'Your pre-written message goes here.';
+    const emailAddress = 'mrafayhanan@gmail.com';
+    const subject = 'Subject';
+    const message = 'Hello Muhammad!\n';
 
     const mailtoLink = `mailto:${emailAddress}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(message)}`;
 
     window.open(mailtoLink, '_blank');
 }
 
+/*Form validation*/
+const inputs = document.querySelectorAll('.input-field');
 
+// Add event listeners to each input field
+inputs.forEach(input => {
+    input.addEventListener('input', () => {
+        if (input.validity.valid) {
+            input.classList.remove('invalid');
+        } else {
+            input.classList.add('invalid');
+        }
+    });
+});
 
+
+document.addEventListener("DOMContentLoaded", function() {
+    const inputFields = document.querySelectorAll(".input-field");
+
+    inputFields.forEach(function(input) {
+      input.addEventListener("blur", function() {
+        validateField(input);
+      });
+    });
+
+    function validateField(input) {
+      if (input.validity.valid) {
+        input.classList.remove("invalid");
+        document.getElementById(input.id + "-error").textContent = "";
+      } else {
+        input.classList.add("invalid");
+        displayErrorMessage(input);
+      }
+    }
+
+    function displayErrorMessage(input) {
+      let errorMessage = "";
+      if (input.validity.valueMissing) {
+        errorMessage = "This field is required.";
+      } else if (input.validity.typeMismatch) {
+        errorMessage = "Please enter a valid email address.";
+      }
+      document.getElementById(input.id + "-error").textContent = errorMessage;
+    }
+  });
+
+
+  document.querySelector(".sendMessage-btn").addEventListener("click", function(event) {
+    const inputFields = document.querySelectorAll(".input-field");
+    let isValid = true;
+
+    inputFields.forEach(function(input) {
+      if (!input.validity.valid) {
+        isValid = false;
+        validateField(input);
+      }
+    });
+
+    if (!isValid) {
+      event.preventDefault();
+      return false;
+    }
+  });
+

styles.css

@@ -306,6 +306,10 @@ nav ul li a:hover {
   padding-inline: 1em;
 }
 
+.input-field.invalid {
+  border: 2px solid red;
+}
+
 .sendMessage-btn {
   cursor: pointer;
   margin-bottom: 3em;