From 389bac55738bf135867e70fd021ab793cae5b631 Mon Sep 17 00:00:00 2001
From: Sam Saccone <samccone@gmail.com>
Date: Wed, 16 Jul 2014 15:36:50 -0400
Subject: [PATCH] improve validation demo for input

---
 demo.html | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/demo.html b/demo.html
index d24b8f9..64ea108 100644
--- a/demo.html
+++ b/demo.html
@@ -35,6 +35,14 @@
       margin: 1em;
     }
 
+    #singleValidation.invalid {
+      border: solid 1px red;
+    }
+
+    #singleValidation {
+      border: solid 1px lime;
+    }
+
     core-input[multiline] {
       border: 1px dotted #ccc;
     }
@@ -69,14 +77,17 @@
       });
     </script>
   </section>
-  
+
   <section horizontal start layout>
-    <aside>This is an example of a single-line text input with number validation. See console for validation errors.</aside>
+    <aside>This is an example of a single-line text input with number validation. The border color reflects the current validation state. See console for validation errors or validity.</aside>
     <core-input id="singleValidation" placeholder="Only enter numbers..." validate="^[0-9]*$"></core-input>
     <script>
       document.getElementById('singleValidation').addEventListener('input-invalid', function(e, value, s) {
         console.log('singleValidation: input invalid! value:', e.detail.value);
       });
+      document.getElementById('singleValidation').addEventListener('input-valid', function(e, value, s) {
+        console.log('singleValidation: input valid! value:', e.detail.value);
+      });
     </script>
   </section>