diff --git a/index.html b/index.html
index 6199627..db2ed42 100644
--- a/index.html
+++ b/index.html
@@ -254,7 +254,8 @@
Let Me Know Your Thoughts!
-
+
+ Feedback must be at least 10 characters long.
diff --git a/website/scripts/script.js b/website/scripts/script.js
index 120fd30..37f3d10 100644
--- a/website/scripts/script.js
+++ b/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) {
diff --git a/website/styles/style.css b/website/styles/style.css
index 647f666..57d0c4f 100644
--- a/website/styles/style.css
+++ b/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;