Focus on and highlight the parameter field if no parameter was given.

The parameter field will take the focus and its edges will turn red. This will
be cleared up if the reset button is hit or if the field is changed.

1 files changed, 9 insertions, 0 deletions

diff --git a/js/looking-glass.js b/js/looking-glass.js
index bbdcf2f..3020e08 100644
--- a/js/looking-glass.js
+++ b/js/looking-glass.js
@@ -31,6 +31,9 @@ $(document).ready(function() {
 
     e.preventDefault();
 
+    // reset the parameter field if it was marked as error
+    $('#input-param').parent().removeClass('has-error');
+
     // reset the form and update the doc modal
     $(this).closest('form').get(0).reset();
     request_doc($('#query').val());
@@ -51,6 +54,11 @@ $(document).ready(function() {
     request_doc($('#query').val());
   });
 
+  // if the field has been completed, turn it back to normal
+  $('#input-param').change(function() {
+    $('#input-param').parent().removeClass('has-error');
+  });
+
   // send an ajax request that will get the info on the router
   $('form').on('submit', function(e) {
     e.preventDefault();
@@ -74,6 +82,7 @@ $(document).ready(function() {
       if (!response || (response.length === 0)) {
         // no parameter given
         $('#error-text').text('No parameter given.');
+        $('#input-param').focus().parent().addClass('has-error');
         $('.alert').slideDown();
       } else {
         var response = $.parseJSON(response);