Feeedback length error checking

index.html

@@ -254,7 +254,8 @@
             <p style="color:white">Let Me Know Your Thoughts!</p>
             <input type="text" name="Name" placeholder="Your Name" required>
             <input type="email" name="Email" placeholder="Your Email ID" required>
-            <textarea name="Message" placeholder="Your Message" rows="4" required></textarea>
+            <textarea name="Message" placeholder="Your Message" rows="4" required oninput="checkFeedbackLength(this)"></textarea>
+            <p id="feedbackError" style="color:#fd4346; opacity: 0%; font-size: 1.2rem; white-space: normal; transition: opacity 0.4s ease ">Feedback must be at least 10 characters long.</p>
             <div class="star-rating" style="text-align: center; margin: 10px;">
                 <input type="radio" id="star5" name="rating" value="5" />
                 <label for="star5" title="5 star">&#9733;</label>

website/scripts/script.js

@@ -132,6 +132,18 @@ window.addEventListener('scroll', () => {
   lastScrollTop = scrollTop;
 });
 
+window.onload = function() {
+  const feedbackField = document.forms['feedback-form']['Message'];
+
+  feedbackField.addEventListener('focus', () => {
+    checkFeedbackLength(feedbackField);
+  })
+
+  feedbackField.addEventListener('blur', () => {
+    document.getElementById('feedbackError').style.opacity = '0%';
+  })
+}
+
 let lastScroll = 0;
 function progress() {
   var scroll = this.scrollY;
@@ -400,6 +412,10 @@ function validateForm() {
     alert("Please select a rating.");
     return false; 
   } 
+
+  if(!checkFeedbackLength(messageInput)) {
+    return false;
+  }
 
   const formData = {
     Name: nameInput.value,
@@ -417,6 +433,16 @@ function validateForm() {
 
  return false;
 } 
+
+function checkFeedbackLength(input) {
+  if(input.value.length < 10) {
+      document.getElementById('feedbackError').style.opacity = '100%';
+      return false;
+  } else {
+      document.getElementById('feedbackError').style.opacity = '0%';
+      return true;
+  }
+}
 
 // EMAIL VALIDATING FUNCTION 
 function isValidEmail(email) {

website/styles/style.css

@@ -978,7 +978,7 @@ footer input[type="submit"]:hover {
 /* Form styling */
 form {
     background-color: #4c4c4c2a;
-    backdrop-filter: blur(10px);
+    backdrop-filter: blur(20px);
     width: 30vw;
     margin-left: -5vw;
     padding: 20px;