comment system update

Signed-off-by: Avinal Kumar <avinal.xlvii@gmail.com>

themes/alchemy/templates/include/comments.html

@@ -1,18 +1,19 @@
 {% if FORM_COMMENTS %}
+<hr>
 <div id="comment-form">
   <div class="alert alert-info" role="alert">
     Feel free to leave a feedback or questions !
   </div>
-  <form id="comment-form" action="{{ FORM_PROPERTIES['action'] }}" target="response" method="POST">
+  <form action="{{ FORM_PROPERTIES['action'] }}" target="response" method="POST" id="valid-form">
     <div class="form-row align-items-center">
-      <div class="form-group col-auto">
+      <div class="form-group col-md-5">
         <label class="sr-only" for="person-name">Name</label>
         <input type="text" class="form-control form-control-sm" id="person-name" placeholder="Your Name (Optional)"
           aria-describedby="nameHelp" name="{{ FORM_PROPERTIES['name'] }}">
         <input type="text" id="page-link" name="{{ FORM_PROPERTIES['link'] }}" hidden>
         <small id="nameHelp" class="form-text text-muted">You may put your GitHub Username.</small>
       </div>
-      <div class="form-group col">
+      <div class="form-group col-md-7">
         <label class="sr-only" for="email-address">Email address</label>
         <input type="email" class="form-control form-control-sm" id="email-address" aria-describedby="emailHelp"
           placeholder="Your Email Address (Optional)" name="{{ FORM_PROPERTIES['email'] }}">
@@ -25,9 +26,12 @@
       <textarea class="form-control form-control-sm" id="comment-section" rows="3"
         placeholder="Please enter your message or feedback. (Required)" aria-describedby="emailHelp"
         name="{{ FORM_PROPERTIES['comment'] }}" required></textarea>
+      <div class="invalid-feedback">
+        Please Enter something !
+      </div>
       <small id="textHelp" class="form-text text-muted">Enter upto 200 characters.</small>
     </div>
-    <button class="btn btn-outline-info" onclick="return submitform()" type="submit">Send</button>
+    <button class="btn btn-outline-info" type="submit">Send</button>
   </form>
   <iframe name="response" hidden></iframe>
 </div>
@@ -37,13 +41,16 @@
     soon if you have added an email.</p>
 </div>
 <script>
-  function submitform() {
+  (function () {
-    var form = document.getElementById('comment-form');
+    'use strict';
+    window.addEventListener('load', function () {
+      var form = document.getElementById('valid-form');
+      form.addEventListener('submit', function (event) {
         document.getElementById('page-link').value = window.location.href;
-    form.style.display = 'none';
+        document.getElementById('comment-form').style.display = 'none';
         document.getElementById('comment-message').style.display = '';
-    var submitted = form.submit();
+      }, false);
-    return false;
+    }, false);
-  };
+  })();
 </script>
 {% endif %}