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;