allow manual validation

PolymerElements · May 13, 2015 · 035781e · 035781e
1 parent 0495aec
commit 035781e
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 9 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -64,6 +64,16 @@
 
   </section>
 
+  <section>
+
+    <div>Manual Validation</div>
+
+    <paper-input id="inputForValidation" required label="only type letters" pattern="[a-zA-Z]*" error-message="letters only, required input!"></paper-input>
+    <br>
+    <button onclick="validate()">Validate!</button>
+
+  </section>
+
   <section>
 
     <div>Character Counter</div>
@@ -94,4 +104,10 @@
 
   </section>
 
+  <script>
+    function validate() {
+      document.getElementById('inputForValidation').validate();
+    }
+  </script>
 </body>
+</html>
diff --git a/paper-input-behavior.html b/paper-input-behavior.html
@@ -180,6 +180,13 @@
       return this.$.input;
     },
 
+    /**
+     * Validates the input element and sets an error style if needed.
+     */
+     validate:function () {
+       return this.inputElement.validate();
+     },
+
     _computeAlwaysFloatLabel: function(alwaysFloatLabel, placeholder) {
       return placeholder || alwaysFloatLabel;
     }

diff --git a/paper-input-container.html b/paper-input-container.html
@@ -311,7 +311,8 @@
     },
 
     listeners: {
-      'addon-attached': '_onAddonAttached'
+      'addon-attached': '_onAddonAttached',
+      'iron-input-validity-changed': '_onInputValidityChanged'
     },
 
     get _valueChangedEvent() {
@@ -365,10 +366,14 @@
       var value = inputElement[this._propertyForValue] || inputElement.value;
 
       var valid;
-      if (inputElement.validate) {
-        valid = inputElement.validate(value);
-      } else if (inputElement.checkValidity) {
-        valid = inputElement.checkValidity();
+
+      // type="number" doesn't have a validate method...
+      if (this.autoValidate) {
+        if (inputElement.validate) {
+          valid = inputElement.validate(value);
+        } else {
+          valid = inputElement.checkValidity();
+        }
       } else {
         valid = true;
       }
@@ -380,10 +385,6 @@
         this._inputHasContent = false;
       }
 
-      if (this.autoValidate) {
-        this.invalid = !valid;
-      }
-
       // notify add-ons
       for (var addon, i = 0; addon = this._addons[i]; i++) {
         // need to set all of these, or call method... thanks input type="number"!
@@ -393,6 +394,15 @@
       }
     },
 
+    _onInputValidityChanged: function() {
+      this.invalid = this._inputElement.invalid;
+
+      // notify add-ons
+      for (var addon, i = 0; addon = this._addons[i]; i++) {
+        addon.invalid = this.invalid;
+      }
+    },
+
     _computeInputContentClass: function(noLabelFloat, alwaysFloatLabel, focused, invalid, _inputHasContent) {
       var cls = 'input-content';
       if (!noLabelFloat) {

diff --git a/test/paper-input-container.html b/test/paper-input-container.html
@@ -74,6 +74,15 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="manual-validate-numbers">
+    <template>
+      <paper-input-container attr-for-value="bind-value">
+        <label id="l">label</label>
+        <input is="iron-input" id="i" pattern="[0-9]*">
+      </paper-input-container>
+    </template>
+  </test-fixture>
+
   <letters-only></letters-only>
 
   <test-fixture id="auto-validate-validator">
@@ -200,6 +209,22 @@
         assert.isTrue(Polymer.dom(container.root).querySelector('.underline').classList.contains('is-invalid'), 'underline has is-invalid class');
       });
 
+      test('styled when the input is set to an invalid value with manual validation', function(done) {
+        var container = fixture('manual-validate-numbers');
+        var input = Polymer.dom(container).querySelector('#i');
+        var label = Polymer.dom(container).querySelector('#l');
+        var line = Polymer.dom(container.root).querySelector('.focused-line');
+        var color = getComputedStyle(label).color;
+        line.addEventListener('transitionend', function() {
+          assert.isTrue(container.invalid, 'invalid is true');
+          assert.notEqual(getComputedStyle(label).color, color, 'label is colored when input is invalid');
+          assert.equal(getTransform(line), 'none', 'line is colored when input is invalid');
+          done();
+        });
+        input.bindValue = 'foobar';
+        input.validate();
+      });
+
     });
 
   </script>