Merge pull request #28 from PolymerElements/validate-on-blur

validate input on blur

demo/index.html

@@ -28,13 +28,12 @@
     <h4>Standard</h4>
     <div class="vertical-section">
       <gold-phone-input></gold-phone-input>
-      <gold-phone-input auto-validate label="Auto-validating"></gold-phone-input>
+      <gold-phone-input auto-validate required label="Auto-validating"></gold-phone-input>
       <gold-phone-input
           label="France phone number"
           country-code="33"
           phone-number-pattern="X-XX-XX-XX-XX"
-          auto-validate
-          required>
+          auto-validate>
       </gold-phone-input>
     </div>
 
@@ -45,7 +44,7 @@ <h4>Pre-validated</h4>
       <gold-phone-input label="Invalid US number" value="415-111-111" auto-validate></gold-phone-input>
     </div>
 
-    <h4>Custom error message</h4>
+    <h4>Custom error message, auto-validates on blur</h4>
     <div class="vertical-section">
       <gold-phone-input auto-validate label="Cats only" error-message="needs more cats" required></gold-phone-input>
     </div>

gold-phone-input.html

@@ -79,7 +79,7 @@
   </style>
 
   <template>
-    <paper-input-container id="container" auto-validate="[[autoValidate]]"
+    <paper-input-container id="container"
         disabled$="[[disabled]]"
         no-label-float="[[noLabelFloat]]"
         always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]"
@@ -155,29 +155,42 @@
         type: String,
         value: 'XXX-XXX-XXXX',
         observer: '_phoneNumberPatternChanged'
+      },
+
+      value: {
+        observer: '_onValueChanged'
       }
     },
 
     observers: [
-      '_computeValue(value)'
+      '_onFocusedChanged(focused)'
     ],
 
+    ready: function() {
+      // If there's an initial input, validate it.
+      if (this.value)
+        this._handleAutoValidate();
+    },
+
     _phoneNumberPatternChanged: function() {
       // Transform the pattern into a regex the iron-input understands.
       var regex = '';
       regex = this.phoneNumberPattern.replace(/\s/g, '\\s');
       regex = regex.replace(/X/gi, '\\d');
       regex = regex.replace(/\+/g, '\\+');
       this.$.input.pattern = regex;
-
-      if (this.autoValidate) {
-        this.$.container.invalid = !this.$.input.validate();
-      }
     },
 
-    _computeValue: function(value) {
+    /**
+     * A handler that is called on input
+     */
+    _onValueChanged: function(value, oldValue) {
+       // The initial property assignment is handled by `ready`.
+       if (oldValue == undefined)
+         return;
+
       var start = this.$.input.selectionStart;
-      var previousCharADash = this.value ? this.value.charAt(start - 1) == '-' : false;
+      var previousCharADash = value ? this.value.charAt(start - 1) == '-' : false;
 
       // Remove any already-applied formatting.
       value = value.replace(/-/g, '');
@@ -208,8 +221,34 @@
         this.$.input.selectionStart = start + 1;
         this.$.input.selectionEnd = start + 1;
       }
-    }
 
+      this._handleAutoValidate();
+    },
+
+    /**
+     * Overidden from Polymer.PaperInputBehavior.
+     */
+    validate: function() {
+      // Update the container and its addons (i.e. the custom error-message).
+      var valid = this.$.input.validate()
+      this.$.container.invalid = !valid;
+      this.$.container.updateAddons({
+        inputElement: this.$.input,
+        value: this.value,
+        invalid: !valid
+      });
+
+      return valid;
+    },
+
+    /**
+     * Overidden from Polymer.IronControlState.
+     */
+    _onFocusedChanged: function(focused) {
+      if (!focused) {
+        this._handleAutoValidate();
+      }
+    }
   })
 
 })();

test/basic.html

@@ -23,6 +23,7 @@
   <script src="../../test-fixture/test-fixture-mocha.js"></script>
 
   <script src="../../iron-test-helpers/test-helpers.js"></script>
+  <script src="../../iron-test-helpers/mock-interactions.js"></script>
 
   <link rel="import" href="../../test-fixture/test-fixture.html">
   <link rel="import" href="../gold-phone-input.html">
@@ -47,7 +48,7 @@
     suite('basic', function() {
       test('input is spaced out correctly', function() {
         var input = fixture('basic');
-        input.value='1231112222';
+        input.value ='1231112222';
         assert.equal(input.value, '123-111-2222');
       });
 
@@ -59,6 +60,10 @@
         var container = Polymer.dom(input.root).querySelector('paper-input-container');
         assert.ok(container, 'paper-input-container exists');
         assert.isTrue(container.invalid);
+
+        var error = Polymer.dom(input.root).querySelector('paper-input-error');
+        assert.ok(error, 'paper-input-error exists');
+        assert.notEqual(getComputedStyle(error).visibility, 'hidden', 'error is not visibility:hidden');
       });
 
       test('valid input is ok', function() {
@@ -69,24 +74,38 @@
         var container = Polymer.dom(input.root).querySelector('paper-input-container');
         assert.ok(container, 'paper-input-container exists');
         assert.isFalse(container.invalid);
+
+        var error = Polymer.dom(input.root).querySelector('paper-input-error');
+        assert.ok(error, 'paper-input-error exists');
+        assert.equal(getComputedStyle(error).visibility, 'hidden', 'error is visibility:hidden');
       });
 
-      test('empty required input shows error', function() {
+      test('empty required input shows error on blur', function(done) {
         var input = fixture('required');
         forceXIfStamp(input);
 
         var error = Polymer.dom(input.root).querySelector('paper-input-error');
         assert.ok(error, 'paper-input-error exists');
-        assert.notEqual(getComputedStyle(error).display, 'none', 'error is not display:none');
+
+        assert.equal(getComputedStyle(error).visibility, 'hidden', 'error is visibility:hidden');
+
+        input.addEventListener('blur', function(event) {
+          assert(!input.focused, 'input is blurred');
+          assert.notEqual(getComputedStyle(error).visibility, 'hidden', 'error is not visibility:hidden');
+          done();
+        });
+        MockInteractions.focus(input.inputElement);
+        MockInteractions.blur(input.inputElement);
       });
 
       test('caret position is preserved', function() {
         var input = fixture('required');
         var ironInput = Polymer.dom(input.root).querySelector('input[is="iron-input"]');
-        input.value='111-111-1';
+
+        input.value ='111-111';
         ironInput.selectionStart = 2;
         ironInput.selectionEnd = 2;
-        input._computeValue('112-111-11');
+        input._onValueChanged('111-111-1', '111-111');
 
         assert.equal(ironInput.selectionStart, 2, 'selectionStart is preserved');
         assert.equal(ironInput.selectionEnd, 2, 'selectionEnd is preserved');
@@ -108,7 +127,6 @@
 
       });
 
-
     });
 
   </script>