diff --git a/docs/_static/html/jmespath_2col_demo.html b/docs/_static/html/jmespath_2col_demo.html
index db2a541..58f0ad1 100644
--- a/docs/_static/html/jmespath_2col_demo.html
+++ b/docs/_static/html/jmespath_2col_demo.html
@@ -14,9 +14,10 @@ <h5>Result</h5>
                      type="text" placeholder="Expression"
                      value="{expression}" />
             </div>
-
-            <textarea class="form-control jmespath-input" rows="{num_rows}">
+            <div>
+              <textarea class="form-control jmespath-input" rows="{num_rows}">
 {jmespath_data}</textarea>
+            </div>
           </form>
 
         </div>
diff --git a/docs/_templates/index.html b/docs/_templates/index.html
index 40f4518..28a1cea 100644
--- a/docs/_templates/index.html
+++ b/docs/_templates/index.html
@@ -24,7 +24,8 @@
             <span class="glyphicon glyphicon-search"></span>
             <input class="form-control jmespath-expression" type="text" placeholder="Expression" value="locations[?state == 'WA'].name | sort(@) | {WashingtonCities: join(', ', @)}" size="40"/>
           </div>
-          <textarea class="form-control jmespath-input" rows="8">
+          <div>
+            <textarea class="form-control jmespath-input" rows="8">
 {
   "locations": [
     {"name": "Seattle", "state": "WA"},
@@ -33,6 +34,7 @@
     {"name": "Olympia", "state": "WA"}
   ]
 }</textarea>
+        </div>
         </form>
         <h3>Result</h3>
         <pre class="jmespath-result"></pre>
@@ -87,10 +89,24 @@ <h3 class="section-distinct">Libraries in Multiple Languages</h3>
 $(document).ready(function() {
     $('.jmespath-demo').each(function(i, el) {
         function evaluateDemo(el) {
-            var expression = $(el).find('.jmespath-expression').val();
-            var inputData = JSON.parse($(el).find('.jmespath-input').val());
-            var result = jmespath.search(inputData, expression);
-            $(el).find('.jmespath-result').text(JSON.stringify(result, null, 2));
+          var expressionTextArea = $(el).find('.jmespath-expression');
+          var expression = expressionTextArea.val();
+          try {
+            jmespath.search({}, expression);
+            expressionTextArea.parent().removeClass('has-error');
+          } catch {
+            expressionTextArea.parent().addClass('has-error');
+          }
+          var input = $(el).find('.jmespath-input');
+          var inputData = {};
+          try {
+            inputData = JSON.parse(input.val());
+            input.parent().removeClass('has-error');
+          } catch {
+            input.parent().addClass('has-error');
+          }
+          var result = jmespath.search(inputData, expression);
+          $(el).find('.jmespath-result').text(JSON.stringify(result, null, 2));
         }
         $(el).find('.jmespath-expression').bind('keyup', function() {
             evaluateDemo(el);
diff --git a/docs/_themes/jmespath/layout.html b/docs/_themes/jmespath/layout.html
index 2ed1a9d..c00ab83 100644
--- a/docs/_themes/jmespath/layout.html
+++ b/docs/_themes/jmespath/layout.html
@@ -43,10 +43,24 @@
 $(document).ready(function() {
     $('.jmespath-demo').each(function(i, el) {
         function evaluateDemo(el) {
-            var expression = $(el).find('.jmespath-expression').val();
-            var inputData = JSON.parse($(el).find('.jmespath-input').val());
-            var result = jmespath.search(inputData, expression);
-            $(el).find('.jmespath-result').text(JSON.stringify(result, null, 2));
+          var expressionTextArea = $(el).find('.jmespath-expression');
+          var expression = expressionTextArea.val();
+          try {
+            jmespath.search({}, expression);
+            expressionTextArea.parent().removeClass('has-error');
+          } catch {
+            expressionTextArea.parent().addClass('has-error');
+          }
+          var input = $(el).find('.jmespath-input');
+          var inputData = {};
+          try {
+            inputData = JSON.parse(input.val());
+            input.parent().removeClass('has-error');
+          } catch {
+            input.parent().addClass('has-error');
+          }
+          var result = jmespath.search(inputData, expression);
+          $(el).find('.jmespath-result').text(JSON.stringify(result, null, 2));
         }
         $(el).find('.jmespath-expression').bind('keyup', function() {
             evaluateDemo(el);