Add client and server side validation for the feedback form

public/js/vroom.js

@@ -498,6 +498,40 @@ function initIndex(){
   });
 }
 
+// The feedback page
+function initFeedback(){
+  $('#email').on('input', function(){
+    if (!$('#email').val().match(/\S+@\S+/) && $('#email').val() !== ''){
+       $('#email').parent().addClass('has-error');
+    }
+    else{
+      $('#email').parent().removeClass('has-error');
+    }
+  });
+
+  $('#comment').on('input', function(){
+    if ($('#comment').val() === ''){
+      $('#comment').parent().addClass('has-error');
+    }
+    else{
+      $('#comment').parent().removeClass('has-error');
+    }
+  });
+
+  $('#feedback-form').submit(function(){
+    var ok = true;
+    if ($('#email').parent().hasClass('has-error')){
+      ok = false;
+      $('#email').notify(localize('ERROR_MAIL_INVALID'), 'error');
+    }
+    if ($('#comment').parent().hasClass('has-error') || $('#comment').val() === ''){
+      ok = false;
+      $('#comment').notify(localize('ERROR_COMMENT_INVALID'), 'error').parent().addClass('has-error');
+    }
+    return ok;
+  });
+}
+
 // The documentation page
 function initDoc(){
 

templates/default/feedback.html.ep

@@ -3,7 +3,7 @@
 %= include 'public_toolbar'
 <div class="container-fluid">
   <div class="well publicForm">
-    <form action="<%= url_for('/feedback') %>" method="post">
+    <form id="feedback-form" action="<%= url_for('/feedback') %>" method="post">
       <legend class=text-center">
         %= l('GIVE_US_YOUR_FEEDBACK')
       </legend>
@@ -15,7 +15,7 @@
         <label for="email">
           %= l('YOUR_MAIL_OPTIONAL')
         </label>
-        <input type="email"
+        <input type="text"
                class="form-control"
                id="email"
                name="email"
@@ -29,8 +29,7 @@
                   name="comment"
                   class="form-control"
                   rows="10"
-                  placeholder="<%= l('VROOM_IS_AWESOME') %>"
+                  placeholder="<%= l('VROOM_IS_AWESOME') %>"></textarea>
-                  required></textarea>
       </div>
       <button type="submit"
               class="btn btn-primary">
@@ -44,4 +43,9 @@
   </div>
 </div>
 %= include 'js_common'
+<script>
+  $(document).ready(function() {
+    initFeedback();
+  });
+</script>
 %= include 'footer'

vroom.pl

@@ -1487,7 +1487,14 @@ any [ qw(GET POST) ] => '/feedback' => sub {
       page => 'feedback'
     );
   }
-  my $email   = $self->param('email') || '';
+  my $email = $self->param('email');
+  if ($email && $email ne '' && !$self->valid_email($email)){
+    return $self->render('error',
+      err  => 'ERROR_MAIL_INVALID',
+      msg  => $self->l('ERROR_MAIL_INVALID'),
+      room => ''
+    );
+  }
   my $comment = $self->param('comment');
   my $sent    = $self->mail(
     to      => $config->{'email.contact'},